{"_id":"@material/mwc-dialog","_rev":"710-3fa8d5e74799ef81e59e9b399dd2e792","name":"@material/mwc-dialog","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.9.0":{"name":"@material/mwc-dialog","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"^3.0.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-d9zYMhTf2bBuuf6xmlPw2nOL03OyotcTNZhhK5G5smFCZIBL3zE+r+4ygD14Iza7pWzT6TiMmDu3xjg6Rt75Mw==","shasum":"5af3f0a9fd12f0faedc7bfe1f127fc11f9e5e6c0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.9.0.tgz","fileCount":16,"unpackedSize":95218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeFCRA9TVsSAnZWagAAQhgP/0H4RyKUVpqpfARaB7cT\nY/fJuUmfCmJvx2SBPI5BLsg0F0McRdRFDbwi2oPjl7JJ3e2dEdleymk5hM2X\nOFpefkmEapMfLA1Tt24A+l8G1nYaSADc+TFegon5SXeZ9MxwRzU+KW/oS0m6\njCjsjHKsSq8TUIiYQXiKirudzxxN1QpVSI2c2KjXz8FUbKkius9LLpnJW5kq\njZsyeX6M4tHSWPj8luUdpRieOCS/kkBMA4AcbuFvCEsHhBtgmv+z4LktgfQA\nU+/ekbP2kAQusqJlnP/K6xehaAKtJqnr+Ldh6wsgxooLaK3HmI6Dk6QSfVUG\nSS3ik5QyOm7oA+upynFRCcpKh2U+WcQzkLrj5byk81MzG6Yk1bYEP9dfSvJu\nm0qNpvvg3HhVCcIsrPVPlpOK6tLn3ODqeBlkv6P7PS3zmhNAHATJwJpMfmgS\nO4jSLT3Ov1iBxm3DvuKCGaUfxNmdFNbyTCo0NKK9yjKZUHBS8RFlF5elB+kT\nhIw4INFusqQ7h1et1Qskco2tqTma6/0I7T4IeZie3X76sIxvfSl7817CgZDu\nLrJcEJZyCYohx54D00mTJHbZm+8uDTtKa1SmTfB3cNwVfKABS8PxIEIFak4I\nkncvEfpLZeJ1cCDIKV0HNbKbJzZZ2LpWHHnkPnqIOfmd64TqxbHZ+1VDBknF\ne6ai\r\n=RX+M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZWK+IvDogfuda9Ccy/9IbEcj0m2y5K8LzxW3FdqrVLAIgRd7ZsMmq6oeNBZEJRBBSmosAEdxCw+l+EZn2uAm8BH8="}]},"maintainers":[{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.9.0_1569548164463_0.706003831157084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-dialog","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/touch-target":"=4.0.0-canary.e851d4f40.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-RucAGhSSx+7Yoq+/qwZFRRlsf1Wg7jk2zrJLs2Awl8HBJ1Koo8DMPJCwfj0lNn0k9DCEliPHpxEfPhqBWzEBUg==","shasum":"4f09d6dfb894ae17d500a8ac4e6d30136764e07c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.9.1.tgz","fileCount":16,"unpackedSize":95231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm30CRA9TVsSAnZWagAAMq4QAJVDlLsAzlStxS1Ts1Gq\n7W/VE11qGO7iDvbDaQ8qewyU5e2eACiDPqr16Z7jBFY5swzbTBofOg5cMBEY\nZapBOOWXzNVZ2JHIKkmi0BjJbaUEot2U173TxXGVakxAWi+VHKY1SAx+/vVh\nAr5xPW8F6ONtLmlCAVm3UKXmPXeU14+omu0ZsvUV43g8sJSDI3DJCRFTnek7\nSTE72cotVoTiIa/hNBhisn0klWTgdfzWtjnYYLsZX7S2UcfK0O0KnYPCdLGG\nCkxSvmvMoNG6HfyCYg8mJhebcwThUxFy6FfhkwXlcNO6RivUleOYiP8rzru+\nSltszV5hTIzKgZQ0QNeD/Z8p4xpZddUg95l/eC6MVOFbY8fVwAmUPFYogm/P\nlfiv2aR7icnFwLDFIyI57VhKHXO/MkduS+nfflJIfW8RxXWcv4zuZ9xgSPnj\nxTeT3pNtKGL1plfg9p/5JH9dAJmF4xhfREK55AwZXpMwyQV5UsauPmBKtGMv\nqeKfKbrKnWhWP8LNnrsWHmf4GJBIz+w3kpWgSbxFd7PGEacNlOuAS7KcDmCA\nyLdsjkagq65A+BKRJxJ29Bw1I9F6Dhvkzjyrhf778gANz6v1irCcrOC13U24\nrdBNam7cQkM+J/LMp2zgeYMhm/I9PXgcbiUrE5uE+SHFVPCV/WHZXFmGJ05w\nftHB\r\n=lJHc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWAaZaIo661bs6QE8P7nVCVVVuvml1AUX/AwV1dmuargIhAM0S6YFaYMJHKfPhhkfMklj7SrhDsALqrCpmx6mS2k8P"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.9.1_1569877491627_0.5848311512479027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-dialog","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=4.0.0-canary.e851d4f40.0","@material/dom":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/touch-target":"=4.0.0-canary.e851d4f40.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-36f9I0Re4/6nQlruOjUtVpk7gwpqBOle1UIaNdmZ/rHuQItWrVo4+pLG6HsJik+a59/5tGg3+17KmohIGRMgCw==","shasum":"e186832b0f01072d8925500ccb9dde37dec4e88a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.10.0.tgz","fileCount":16,"unpackedSize":95393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAMCRA9TVsSAnZWagAAMogP/iFMDJAsoQbuTKOcj2EG\nPO376j5N7rm/KAtkcxTrAZQWSwG3EULxYBpOQTWIHfswYAYnHhMy2AWNmNzj\nkcERbnatSfRKKNpejIjIX1L2qYeU+Ok8fn87Oqj5hJQb5FVeeyKG1qis9RpW\nkODwA3PcV1wfM+Y/ZT1r85i3iIAgcmt74l2jJJ+hX5gBv3tuIRPWNb9hxrRz\nFTWA73e4+ctjRNnJwCiyOX8rvYyZIWUwVikIuEpAOUPXkXnubke7r4dE25jl\ne+Ul2uzP0utFq5VC55z3kqyVW8nmf8ULzBQxUVpJpUwSxsufTm51KmFEmEaX\nOCXJeB60VMdeEJpuIEwn4vbHKpH0XhwmhthW9pxDhRAyvwkrJ+GWK9C4+uyf\nmdoItbmI9MCKqp9/rUtvPg6WPUPqomYTQ8togsp5gHLp5gQDlg1psf8JGt/B\n8OLT9Lq7NZ4bgkeQyLcCPXAfgcsTGb01rJ0PhrNvoef6pwaG4ctSrS4tGijN\nDNYfKO6eX1TjZwTqu5aqjdlQ+Cd5PcET3H7GqyKIhdLN59jikVcT5bbRLvQN\nJfeCVNJ1y1LrKcK316AtInd9xKBwtUwrDwaL1wAUCSsLMUvKuQl0IgZBbK9S\nsWpCSOLoniYvGI9mZoibNJKdBCbbeIg+BaEsXv+gnkTlUXt4xH8D5ZxIu4m5\nSP13\r\n=oShy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4Kw1CqkwwwUxagjzovw8rU3V55DSHQl+HnaDJVVUTPAiEAq8jwN6u+WtkxhlFJ39Vr44HarLpINWqu9D6vxKEq7yE="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.10.0_1570836491461_0.15987005553218592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-dialog","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=5.0.0-canary.5729943ba.0","@material/dom":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/touch-target":"=5.0.0-canary.5729943ba.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Bhvnqt71W8ZcdVMcH4pxJnuro6NcizMzqQC2iXsyBeDGlKAr3u0BDRTQ1SvIqEg+Y3PocJL9whhy1BNYfAANMg==","shasum":"e70ee79eece5fec9bec75643399cc3c3ceb3a45c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.11.0.tgz","fileCount":16,"unpackedSize":108857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3nCRA9TVsSAnZWagAAAPQQAJV+je0BzwZNsuhmYUlc\nTs8KwK8q6Nmfr9QamPNY+IJdhalnfe28L+/N/jJLA55ee9tk3yFNbud2qxge\nfse9wZpmmolOWuYUIiuTkPbpNZ/JXtFdFQ6UZIdIZp9VWfEAZnrbJHPw6Zbo\nY2P+KRYfpnxuPlSWu1keBQestEL0s9SS77si5KzqqklVDLY9TBP8po2xWmpq\nqQzCNLoCw+MnvGXeKBTv6MFHllCFb/uysneReXGS2V/7O5fW8nKp2ekH3mGc\n1oMrwtKjU9Paefln9VAnPvgk6nbyOZs9S3kQo4Pg57bUjvS09LuDFnBPiLJv\nyDt5V+NukKd4JFx6jW78XT+qFk57LQ5dystalgY0gMlXCftzw0xotkenXYrV\nB5Zw97lhtrClsWKYOkx+GR8Qcf2W7jcDx1OGHsAnNMDoTtwUVgcllNppze59\nrPRwT9vwz22EtSvodHfeR7AaZgk0vlnrHQRx5DGmusZasnzLTX9gj7A6oVUG\nVuVY2c50IE1OaOLihWSfh+QgCSFyHjXtgpKQdUPwhzD22jTr3rDrdBi1IWUO\nWoodqm8z1v4LpNVAQQt/xdDNz5h/svkurBmnZaG0Aba+PlF16Zgq1DME+sGF\nMWpUmZM8BRW+jotlXi4Hsk24M4ZdbadjkF3Tjqr0yuqrosFv51V6+fw0JG2K\nrLSr\r\n=50SO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPz2dmWqU3I4YNzhiNIvuYMbRU0cah76T3B7Js5BWHwwIhAJdToFZwOr5hJAtOvA6OGLebNCSmlxfRgTJxe8I37Qij"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.11.0_1574804966666_0.959260736017918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-dialog","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=5.0.0-canary.5729943ba.0","@material/dom":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/touch-target":"=5.0.0-canary.5729943ba.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-/WDT9Om1aPxF/wPPhWiW5stXrpRELxySVEFIi4pVlEw+kquGulo1wsoNDNFy/iQS44GY3iVRnKiOdFlYNC+DyA==","shasum":"57a45cda7ac4706ce58ea14ea45d71fbf730db9b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.11.1.tgz","fileCount":16,"unpackedSize":108857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK2CRA9TVsSAnZWagAALfMP/Rs4MQ7Pm7Ai8T7WE7ps\njLFlCrR747ek+gBGBbMp5n/TZynTB3UwR8O3nj4IztLS5gEf1WZh54HBI0Io\nJTmIZRd+ISEIoJDIuUShJok1DKf8Fti6VgQ2gFIz/g4apuwPU+ShJIDu7cI+\nZNigClCBJbxgdcnaGkeZQ1o1R5xiUtNB0Z4znGql01JgDDM82p2snmuKwuzp\n4TKDx3N+SlCwh8BBq5QzD6aZxf+wtgi1UTF7GX95f2xiWcxcBCJ6aAwaq9os\n4ns3fwXOEoKQXM0B0O89rSeQuhhxmSbEtKHmqass92gGK9p019jDabgvBHJP\nPQ9TL0oYnv61Kjk8C2ZySU0nkqXqSMRdCzIhGB2E2PWROIU2IKAqvwrEnG7D\nRM4WLq7wtXIz/s1NizQ07f9Ol08ZKNv8Dk4FVK2WCuDoorLkUct8LPbJCGF3\ncWeYme23BuGnho5WOvxMgJ1Wnkitw/iOhSJKAI/U4tPUvit4k/UzJ6eepju0\nc/EsuG9q1C9iH/gJW+QgHnhvaZNtO20PC9kV1D33uTVknhnecXrqC0M6En70\nBOf0SN9FM9GyVz71lVFXg5PycwMqoIzuCvxQAaBHJvpIXrFVzgfIjz86SwNb\nwAGv6Tzub6lfVQbvIrfdMcdp1u8DhdO1Scgb8q2IQCrXCVy8SiAZ8cjmuMoC\nDUVl\r\n=8+2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqP88XvTphKL78r0EykMFTeIDeiDUU1De0lLy7nZEmzAiEAyecbnbPav0IMwpHtrV6s4cWWc/ccBw1/gbSq+jFdbkY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.11.1_1574814389812_0.24081798867094428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-dialog","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=5.0.0-canary.1c494e567.0","@material/dom":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/touch-target":"=5.0.0-canary.1c494e567.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-5WmBd2flbqJsNHXBBpQXon3tVzFbEC9COQYulaZJWNs6HFaPNFkHELrgfhn66yIb2UDCgd3DTKFZdhdfuqvykQ==","shasum":"141fd51b09e3135c654687574b3480073142cf66","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.12.0.tgz","fileCount":16,"unpackedSize":110145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkjCRA9TVsSAnZWagAAossP/2aSES4YcJQ/ZHpykbI0\nrLcH4Pl/6foyIof4Q0jwuhfiWABNZCHtknQduYY+/1aG6mNB2etVB/Q6+6Xh\nhrD7t7s5EqOPEOSImEBI96oJ2hcETr2R3ms8i5JGIeMwkMUaHoWTttT0cThw\nnsPIFqFtusrdKJ+94kokQ9YrEw/PGI31j9Y5yaV7uMyTN1Kour8rzQqbPisP\nWkQHCXEfIm3qI2Ua8/SLbBsocu8HONv3QYYRiWIA5IY3hSzxyf1vccjvqWnT\nszbSL3V3LjamQxiS0i26b2pyKyl4PAB0OBr91ZFDb1OVhygU+eT8wzRJr+r0\ntmdoWARzgiPrHNAT0GwfaJDl80yGrJ7wwTqkj4yO5SNFneVrlGFAIzywHnYt\na5DaDxCbZ3Vct2GYcU0TKZ4TPHKp9ra7clDFOf++lMKgcToYwphPZJUiKySm\nA69anzEt76tjisDRqYZAjzQxHpHNEwW09tXhqJJX2qT4eB4ARB0E7oQaDcYQ\ng3qcuOfKQcqTZsPLHN5Ym55dpKVTeYpAMXSZ0H4fLH7PaQ+KHuLXbWvHVwrx\nosQTlFnQun+6GGsm6Kes+v3OByj6iQsWKPCtMImXr+dBzrJ8yX9zdbmce3n8\nYMR+W79gSSSAVUxi0yK1Nx42WZhuf5Zhf0P+GDzIiWe/zn1XuEiaUG3zR+ux\nlId7\r\n=QEQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGxOasHnJz49V6psPrfbwy8d8plduTEOCRw0b4cLyQvAiEApDNqwZyy8xISG0SZwfJUAp54ogPwzISS9/3mgOjqo7M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.12.0_1576626467210_0.2129292342703093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-dialog","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=5.0.0-canary.a1a0deb3e.0","@material/dom":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/touch-target":"=5.0.0-canary.a1a0deb3e.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-D2Blab0fuKvhpT90aKsDxPAdPmcaV/zqUoUHUqTHdZdifyFH0CJcAkrH1HzRjptEdXcPtfMSY3XT9TCIqcMUiQ==","shasum":"290d37c7a1c455786001b4e8c23c57b5eea9b804","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.13.0.tgz","fileCount":16,"unpackedSize":111218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPckCRA9TVsSAnZWagAA7CQQAIngSLnScrJOehQS0fWJ\n2TvFAKbJLcdp4927aOBQPm5qWQ/0H0l2iCP1yhemJIg8rozFF6Tmq5RW7Hyr\nbIwHugP5SUw9jomgxhpiqU3gTGNEng2GunOo039XHRRaRxVFLszQpmb/fGhw\nfR0Dt9M9oHJXJSl8BkgObGgPKu/dF7JTnMKm9MVZpRhTijUcOyV6x0yTTfVn\nroPe04vSH+OAuKxZXLhMJ0RA74YXLHt+ZQeGq3Lfeq12hPRROft0qwus0Tp9\n/W8SPS9KEw8fTMJtk9TymLzd6E2mUsyoVLUn4HWJvHniZPUA17v5by46JfsD\n02q2BnQSp/9TFbYJLpr85Uz7mq/BjpJlQXbs91zF6mmdoyMPdgInF4/wF6y5\ne39YIvN4x0L3LiwKbOqIW/T4nNIoycxBXVv69kINuUoM7FZ5XiOBLiE5iYQx\nz4Zpu+AOfikPjGxEX7oOIdrMnqu/NvBJP4+inMuVXOvMv0hSKy4XkjYtMI6A\n4pnDOl28Cl/FcEcrHNQOrBiosBkSNForbZzbR+QhIlCep/ZozLNELK8jan3P\nKX0VGZCkBfSPpbiT4B4eiEq4btw8yhxeb+K/XTivN16aq+H+4UKYEY0AvvQB\nO9az9Z/JYHVlzJgRfNfa7fFVtUnyM1OQzHelSgZYgyifRIe6agcSZeUoq2yA\nvLkY\r\n=Y1bP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACGYvpVK3Xx2i+PQowfIK7y72itf5cynJTixh0udvakAiEA89z7xgnpinpRf4ZX5EQvh8qFCTYo5tkU/McEG8Jy7XQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.13.0_1580791588304_0.2541624321096754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"1.0.0-canary.66f6244e.0":{"name":"@material/mwc-dialog","version":"1.0.0-canary.66f6244e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.781434a92.0","@material/dom":"=6.0.0-canary.781434a92.0","@material/mwc-base":"1.0.0-canary.66f6244e.0","@material/touch-target":"=6.0.0-canary.781434a92.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c88e38082a6e2fa86f814bbc373e793d3a03a086","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c88e38082a6e2fa86f814bbc373e793d3a03a086/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c88e38082a6e2fa86f814bbc373e793d3a03a086/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c88e38082a6e2fa86f814bbc373e793d3a03a086/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c88e38082a6e2fa86f814bbc373e793d3a03a086/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c88e38082a6e2fa86f814bbc373e793d3a03a086/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@1.0.0-canary.66f6244e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ONUPfeEOvJY11W0yp7VbwsgaNVyqVoumuh4gXeW9YbXPVaMlnx1Hor1wzExbqkxHVmZwpu1FM3aRKbQ6ym4Yng==","shasum":"5d90fb05dc85586422a7798ad09c8f1d4c33497e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-1.0.0-canary.66f6244e.0.tgz","fileCount":16,"unpackedSize":114233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHinCRA9TVsSAnZWagAAe4oP/RrQCMlY65TPYqUWrKSX\nVgcKu2r+iGqo37x1e5N5uxpZwCCUA0N618SI2Yt+D96omuvsz5K928m0Pd8M\nef29Rdby9cUvyX/+O0NxeOU5XoxFJCpajbMzrFzQneFU54xBIjiehGxbcbS7\nqSDtjVygp9KiNPGBIoiDwaMnwuVwbKBXWb0ZYiDoVBO8nqTbtD5k7nrGmhgl\nIAG4DN7g/djqHkimhA9QX7KLliV9YwJk/tMZzLRF9cqGt9Ndl6XUtGKyX2eM\n738Gh3SRG9xIzivpZtZkCsBSfhtoT07ZHeycvEdY0VnSlBTp5D/KsP1b/sYV\nZ4FWgacUK7pHEBBFbysWRelDVQX/MhartBAhonhg7J5VCT2M8yABwtLVCIYp\nlBVST06iM5Ptdwp5Mr68swRrL8S4fBnUrtuQzCSSjki7+UNGezFat1tK+fPq\nDXVSyS/NdF3XpfESOMa7YzzUyDEAh2TDAjRVI76lw+zGZbQhuXsXzJySjLkQ\nGUJlLzySoSQ48iVBEPArjh+lYVRKY3vgOzEgOFpmvEODW0fO9jAYTCL3mBOM\nV3EiRHdQnPmC+zY+txuBcm6iD82YsiBqUkhl2J33upsm7Bs5P0S+YVO13v9/\nFe9cqLU0haF9O8zmtqyb1uvywSMtKhpwhsDNfMFLytoV25rNuNvubCqlbZh1\np/IA\r\n=Ls2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfVO0HKqks6e/7vI0Rv6tOL6aCdqon4HqwMu4UgDovLQIhAPXBgCJe5zY2XDqomRAFTBWbKtfjW2UKaTmRC2I6lQ2h"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_1.0.0-canary.66f6244e.0_1582856359367_0.4816738183699776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.781434a92.0","@material/dom":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/touch-target":"=6.0.0-canary.781434a92.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eSKBdTxRbCnk2cT5ADK1F3S/2VgsP58S6XL3MNLErfskG03BBknIJbLFcpQBn5+XqqgeklWkV1/Vh2tOzMMajA==","shasum":"6e941c190a1c53e98a4e3079a1f6146e1b0d1757","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":114235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHqpCRA9TVsSAnZWagAA0w8P/06VPzfaqfk8ow9D9S8M\nMqwbdO+8Y1gLQj+lV02HwMeUF1mg+riDYijW4m23LyDNCVCQ4JiQ11TGY7lY\nTmOLNiyiMYOY+X4IjRSci2PHNl/CLcNQ39hHzN2HxxnWWEZEuIFGGu+stAHy\nDCf0LfcWFsl1KU8+BA2hCd2lokJwiPmqw1euXYa2pAWn/9cEvlfA3hQBZ5jZ\n6qxvBG/WOJQEJD8yKLqhVOOe6ML3r0lDpcRH3EKX7lYwNEp6XxxNMgFmFBj9\n/9Nc7HN+EmUeMhmdbYhpug5vbjGrqOC2ZtRvi9ZzrbMNCA6/U68ebWHhXFfK\npBTUXeEbBEHrCIxIk2XI1eWNcUp1E/hnqlf8zxSLeH1DO+ARumvYcagFb0/r\n41NN/cFGv/eR9sCU9hbRo6+4RIGTM1pHTJG9tALbjEobsdTW5r/RxUZNQQl5\nSm2B5CQzjNXtPuke/Lnus5oR0I/8fKqyvDsapkqVVcZ+Uu0EFxGmdBDayIpq\nb43Cq+kvMfNrAan8SqmJuhTU59LFFCKtswOr4WBiw9qoko24ixQyeiT3kctr\nRZtNWnuZCkNOHB8LZ6NM5GQ1U0CJL5NfRHrVn5c+Zhkj3rNaWoNMk0y0RJpO\nG4LEl2bQs2kpSnlEHyRrODStc+GulEOJeEqJrrQRS1gwqWlmjaYar3j4QAPy\nFEmh\r\n=e1/E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCInRhc6K/JlrPw4goy6xC2pVry999/ZtNV0u79XCyHOQIgXCKGqKlZ+AaWTq/T0kDBnqfrs0aFMajZJuTem9FOqSQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.f790f713.0_1582856872865_0.05920762991333928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IZ0uaVez1ltUqDIParvhGDQNLXAo5z+HgXoTwA2OuGb3dO7gRHLCd05ZyGJJXlWHJ5LwEZJIFV+v7ciJieJDqw==","shasum":"7515f4397835c340bfaa3024d5fcf16628bde447","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":114193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqMCRA9TVsSAnZWagAAcHQQAJwL8jDDDs96HXSWV0rU\nAIuY6Gx45uTREJpQU2oAuqRlZ2Sz2jClY1fyMrSvu4XQQBuqu85BBCo7ql5m\nVr3YNpApnNPd9TjUJf5bOfgNWtCQp5yKuj2MAcC4NMThumOuFP8MM4XLIEdE\nshWkOtBH0Ft3alUat9aAWuW18FyALuU8zT/ReNTLuO+7k9i33VWxYgZHjuBO\nJlUf30PtRxuwHrjnvZaJJJnKUDPd95oDNZq/5lan999LeppqvBfAyjaOXvQz\n0n9gbhg4339tIrO7yI+B3RG8KbIl7dQY9VdB7D3K2wNtTejC9+FeywMXfnzS\nNtYBRuF60fyiIloiCHBUMCaRGEi7FB1uKxnKIQJv+BTdiwK26bFqLKfyHvf0\nYaObiLcAPTEE2VZQ3eKKJF3chyMtbMPEHridx0sP4fdq1S8Mm1oL81JLlUtw\ncHz9fgaQb4HJ+0j+bImG3N0Plupj96ZorKq1HsWsW1P5JMLVRrrVtOj/Kkv6\nvIlubufkoNb1kRMzsa9w5pk1CqcYNpQ1UPuTQF9gjPcuxsj51KZmKrgvhfMb\n8yPEsp3YxEVyrrqvSdvmLKvPff0a4djTb6g2V6kw1a67ZNvaymU0sZlpi7JO\n+LZ9VTW8wNbSQbYs7QuzfybQ9qGqWZdd5Wotv5xEvHjM7sQEFoy/6sFuPMAp\niN2q\r\n=3oIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC88ICkmjX3XLhFzlaEa3Q+Xb2EofmKczpmvyHvC0n6MgIgER/WWEi213rImXYoZ77LEwFQwEg9nQ2HfFT8FOq+JkI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.c759cfbc.0_1582934667858_0.011873880411152227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7DJ8RX8y/Im6L+X6ZOKm8AfHyH5RqkSsCe0Tv5nBeM/8qKxPK/t26aWlS8lylIlHnFYpZz4n5p/KaCYnHb1CYA==","shasum":"6409f0a4e3325a13c1efac02a5bff058016affee","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":114193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa24CRA9TVsSAnZWagAAK4AQAKUeUXjWE3fwcPJ5oaPA\nQVrjILqJ36g7dsNsoAm4e8A5z/rftWmKaX51ECyZkb3xplOF5+ZpGqfBF00A\nvtXveH8GZsWvtP7nW8rNdkszcw0lGBq81vY0nTCka52Xrl3JCyjJubgmldR9\nz9Jxeru7k+guctTf+l2Rk/RYYrVAR8ONmlURJEHtahNpLqT+S7nfvGEqWhPE\ny1QgkrEcWBnm/OX2sVJyu1m8eJl05322BSZ0ustkBhKuXXRghZmfw8b+3IXS\ncVaN1pWnGQWezh4HKAbIotWUuWqz8r71jKVWOFaIFzA8PKNLSB79b33kXh1S\n+OYQCwcI2ikDl6mZNJ1jgJb1+d+IIZl+B9RQcsKRaJU3/qMtG/kLuRDXoOR0\nweZjTrCLmlVbtCQKIFwUDsu/EkkxH3XdYnQEWWM5dYJ5pF3U2uZmj1dJWYBc\n1/tiSQxHTd8SthBakl+9D13Up/MoirQwhv+xqry/NkGvCxrh1TfaCHa/mDno\nHkz437ZXecKqM8uJ2nuAIcJ7y9NwWoZyKByB4DhYJowd4xdbbhHsEmZiV8wE\n5GxpjbFU0hMvFELu/9Yze0T9yGciiBGSOzV06rClGOdlhlK+sI1fdwKnL8ml\n9yFaVqlnEi9s27I4pEBQSFAgrTC9fbKSwXK0JE0JXsk/w6ns7r62IjNZoAf3\n2KtX\r\n=d3Il\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHI+xJNVeadft2QlWqJtg5wOCKswHEfenk7nyhsTY8K3AiAnGyybOYCF0ngB7wifjsf1GjL7lnULNcuTtz/uFgQ5Ng=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.97ef53d8.0_1582935480318_0.23977161293321436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Zlj8pJLmVfq6uHlwI9LhCy8aRyDZpBZWB092l7+nrc4ler+M+FRIGd5OefS8vQT089yq5LAlj9VyRkEIjTKiQA==","shasum":"2c857c794236dc9e4c2d112fbcd5512cc79aa33a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":114193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmICRA9TVsSAnZWagAAzQ8P/RpT+TV/rbSZdzf8dbiR\niefT3hSM+R/uP4E0v6DjHzcNqKO58xGmkFY+G7iWduQLVT3Tktj9rf3zY3In\n4ix84bGa49leOvo/dbWpOjnbIITmRQi6ab43FmcGtleju0JC+zBoRwTRNz1S\nIqHpZu8c7D5w+FOAiuXXZSUHRjgjXHAIa9y6Dko0fs+gSfo+DTL6/rZ002a/\nP0q5rg9MEbfzN73bNo5b+ofCDWNxCdrvYLQva6OIERJvxl9bzjr0cucBFawy\n37wJj2YBmtuc7V0mmamaLAYgyaltITggPvlexZuZNXm2POmZ8zISgxarTHrY\nZH88FWhIoJtiqv5ww4LwHpHLtJ+0cbbL7Afn2uD2/dOnyV5x9QJqb2Yk6bjX\n6poBeZeQ3KzQUf1vqCEpgtwIwrHpjR33WlUktloErxnCZcoU/v2iRT39Twti\nNmlmuoODd0mEKE3OulByi8upDmm6PKD2C1ZIWS5ObXRtjUXvRfBrHFy9W6yU\n3PWXO/Vvaw5bryWSlucmOZeYJLRzxFHeYirf7FazeX4KMB+EIvtoPjRNjagq\nmu0yXnZNtjNT5KPv2WQyI3NbZbD0WkPv1xbawvjNgD2u3kxju3kBJt+zHCvt\nCbJ7EYdfDiye6f55CLrDZhim9TWFRCifOBEQlsxYX0wuZZqpHf8dGw0/nlMI\nUbB0\r\n=kDz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+VXrvxvB+jo3YcdGvAWDJRcGBoD6olxKrV979WTz4mAiBhbVg+D1ufrCmp+ByOFIhtWyuVhfJtFmBasiTvOuQKOQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.24f5fa6e.0_1582938503746_0.6510880127536658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lxVZ9u+/eoBfInCI1eqkTXYSfwmFYeLTLYdiEGcoat9vAj/UNJXaX6A+Sg3AvIJttRdsMbWOvk8WvURQ5bXFZA==","shasum":"2442cb5c39b6586e99b5853aba503739c809b46f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":114202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdW6CRA9TVsSAnZWagAAEZcP/1ZYHMMIDvQe7/dN+yI6\n8ZKOJ2STZFnUUn1iAkr3xj9PPr3D063xMbfNbl45EtBEg73iK7k14HUSnySs\nQ+daQJWFi54LovDWqighh26jASSrPncZCM1GLLIiL3qo8faSm97ViaU3jlw+\nKSiNNVFn7ZzHBHWi4t5gJY2SZy7p/e6/oxFFfTzl6q0iUGH8cBGhh5HNyDhC\ntiTAhyxYBa2vw954/XIGLs5X8M/4kPGGpeF8O18TWl4EurOpRLGGcQjgo85i\nrksQcMQD/aro8Be6IKdfU+hUTLbmahFPXsCLsQ4DYE9om0khvCKYvJ7mIc3I\nigSkYhnWR3Kw8VusFsbQSCf07Bn05PeakudaqOXD0JrZleYFtj2KJRzTIkkE\nUHxWpPq9+WrUhkUOSQXJ3gHkZ3bLoIhoSSFOyR6+jZ+mATb4J73MUaw4lyyp\n5YTkc7K7gUl8kH3fxUoSvIR1Xj+cjH8VefXjd+qLkpLDBLBiBMPS3mVPN6n/\napYaBOesgaYz9zM/BM8ouNqO+IePPTnvSYRruAyBeNO0Ft0cw9eSO5ItA+FB\nCz+YFe99LjzdL655a9IW3hACM+Mmmk1mf2JM9MlzUnoWNeCF7uG+SaT4Nm8S\n4AqsCLG6QNHc4YFuyE8xUjs9iaeaYt0sNjZk99frjyOwSvWhYJvf3kx68PpC\nIU/K\r\n=rJIN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6rXhUsPmBSaiMCsxVOidHiDzfmMnc3nnSH20gvUK8KQIhAJ0gcpR/uqLAUkxld3Besv/VxVGRZq8yZB2rPcDGF3Ry"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.960e214f.0_1582945722327_0.6662797072771516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LAESde1MqE/kOeyFWyHY3mYUR+u/8gwEx7WdazijohbTFVa89AdGYLJa3C2RRsXOc27OWmaZktwW7dtoQjc0gg==","shasum":"57d67807254a6818057274ce7d3dee2867f816a1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXasxCRA9TVsSAnZWagAAB+gP/16d+8c4CrZ+MnDodai1\nFY4Yg81CuiN0jb7X2P9pM1UyWRg0336M8WD/1Vl1SqB/92PqUCdh4bxWKtm6\nh0y5Ka7KF0J9uhX7muk1Ead78/Rijqd+2f92AwFxB8Lx8LehyfphrdEOYoud\nvHXrGDwfioqsZk1cMe66ouxHIsX/9Gy1Z8x/izvW0ruoO/jnpnLge0f0rdyA\n9X+5VaTcP1QJJJzhFm/MlzpsactQxe2LFX5PhhW/hKeTp7LJK+IExpId42/9\n1dpQiK/dntZ+wQ5TNg4mRr0hXKe9Mt4Z7YdjZKKOpZcG3KRS4VXetmiDpLCN\ngL1gDJwHRRAdx4MHH9MHU7aloRfWCoRA5wbTM9tB4xZqXoxGyF435sD4Z9gI\nZd3w2qumqrIetzu94DRtxVLg4GAEeN5nen3ZLx978N+tpLxgY2jIVqGd283s\nmjUjadROJhqeE7BOaOunIL3cGIFEL/ySV7RL9pheLztufDsYkQf1rS1Biuh7\n2uMa7HLsdM0UWkd3V9Q7ej8fD9c8V6yK62bPJ8gRptUS8hLF02DOw3SOoA9z\nb+hFWBs+Gh1FLDfK5+KZBmTItcXeVL9GLf8ZQE6Tg9x4+EQVsHtdG89tegzW\n90J/p25/U0kInqzlvnv3bw9Kbo30Qq8QTqpNoC65jhSktbHbx751e+YXDCX8\no9+6\r\n=s8Jy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLwKEPXCEZx7Y4dif1KvytWlhuYHb3X/jc4w/NQSrr9wIgVdkzedLt4wV2mXUvYTC4TX5spmOv4LZ21u7wpuoYOxM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.a2f046f5.0_1583196976561_0.5285634150930463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.69edc6e28.0","@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/touch-target":"=6.0.0-canary.69edc6e28.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s1S8JGGD+zUgmKRklTLuKb6m5Vui5uc6xiJvYXfl3YC7h8HaRW01D76TriQGEbkgZJrkhPsABZ+g3GpvwiKwCw==","shasum":"2caafa0e51d867e34f7a53743e56e799c716914f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLBCRA9TVsSAnZWagAAtb8QAKRBzl6uJx2Uh+yOqdzA\nVyMEkdjq3Jn6skNsMjbqQ/ILlvI7dYORWJUJeuUChXVh56rSAr1PKMvhgYjj\nxMJ9fxbO/+2u9HpakCeXLSAmc7a9NQWtXCORC58upjmIqk2j1vpZX7Rg7hp7\n3gjj16KK/EGyEszNnYKJu+EkDm05uSU15vESyXR4+1DN4TKF4Livux5h6DT+\nMhY2Nd0kL6pF3HeyjSHjvKEFrwym+wMO+wXtPdfr5tMi4VJwPFLA1ZYNjhqF\nAbFP3kvqp44Z8i8y9BUpez9zKHU62AnffEg/JP0kttLVOcZTM8KcIM18SCJs\nGxoYAUnM2kwsRC36P+u37vxDMtZzWLxtuemcAP7DOoHkAowtDq5yU0UVnX0c\nvkNy/pnH6su1ErofcIj2bbDq93KmnfVCkTNIZMmnAgbALpaUpWObPsE0p7+6\n7rcvwqd+FEZb4j5xle57MDm51qLZ/qIra/rz42Dy96uWcpucU1sHdNXv+gxX\nfC2qxsa+bmFuQT8wHrbf6BYzUJLuPPInmgDrBs1EKBzHO7RQdppHt4trECjp\n0NCvacGd/ABzcJp8LbfEqsxPrKwBkO67agGdMHhTIf07QSTh+oflv9qVD1qG\nSetYY+qNpMm3pOauUcrNp6wWbDdrpjHi4slEd0kq4Ghjm0SMNOPhIe0XwA42\nA7Uy\r\n=TsOO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr8ufPnJQqsL5VgpY16Eb3oJRsrBEcwvWCsOhKWSO4fAiEAl8Xv2ZdmWRgADo9MKqvQMqJaDUoTcvIVLZe5vSqkxpg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.024f371a.0_1583198912939_0.3052271939900657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.9372e4939.0","@material/dom":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/touch-target":"=6.0.0-canary.9372e4939.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-taXjXcS3dn50P3KwDWPxHi8P4B+v1sEq4NMvfZwRrvIn/zpTObNgyKt7zw8Ozg9JB4D63zU6hdXdJVbtV6C2uA==","shasum":"8122174f0d34708f62e11884cff6e7d53babc22f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs0nCRA9TVsSAnZWagAANGMP/iVQkGwWVvXn9JQTkJec\naYxRlkqApNavskZ5me3tksrLBiZ0CEoxUwAvfrg82XbsTBN0Nt8wPdMKbx4j\nOWCw3lwG35HBQnmjVrZ7P1fgrNYOLJrqr3fT5st9cDtQbTyVUd4sKkW9G8S1\nE+xGtnqjBL5+LYqWGGOCfIJPDSVxuaI6xQJ7ujhra2NObBcpD9fkdbvhTGro\n/s646BesxYrtehl9U1XC51gj6Wsb5fXh52r0vEDUd8jaFDELI1xLLHacP0XF\n0qVoOEF7/eDI3qFzzxcxhOuuVyTO0QMtMkKABxI3hwYI4q6oRuWv3mFZXiry\nOWF9++h0s5lzm1ysXSWuJA5CLc50v4mBkUe4tdHbGr1BMJ5NR804jakts75h\nFniXZ3voUYfYjb8l8U/vzldNEvA/XoQnsUqcIWJry5oVjkcJ5KoPQkxzmbIt\nJh7NJqzPxcdHhYuZTmNAAAjtZrbdH5MUB+pxGtxxcZILlyGNrHtcbUYk4ViI\nECn4fJrnoBVSdECn9BEkLqbZyIQNj6/BFNp1i7+y/FT/SgDX9aR5EyYPXrXu\nzA2nDuOf38lH49cwowRz8eebBJdCFhG6eerejLo16W5ZdJF8JgmpDaJ6hYU/\n9KHWgLdg25V9XKk4vHHfLVe7qidLMP5fQ3yG3/+PVUfS8I93xXVBgIBIL1bn\nM98U\r\n=CXmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBzUD+YBTm9tkNnC85LgJ42dsAQpjm3TIhGZk8f/ZSPgIhALEdbkYr42cV9EOJRMCF3hIPpUuYVkToXcLAyrcS4pn9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.2f164110.0_1583271206997_0.1313817847578045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.9cf5e9842.0","@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/touch-target":"=6.0.0-canary.9cf5e9842.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-J5luVH7+Z6sBa+lTHd6whfQdSJFEODJOCUzdEKhG6Ut+1piE3OxtntXnkqqGV1D87TZzQKSLi1jtyFUjzT4GOg==","shasum":"bccda33ed2b4f64ff81a90ea55bc68781c943419","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvHvCRA9TVsSAnZWagAAySsP/AmWyO0bYVDmHTEoT3Rh\nnyiPUKW4Ti/tOB8h0gEr9nRpBQOT6gxBiEpSAmdCNX5dl9G/ylq0NjvbT5LI\ncs4vGj7lqS+k+5pdEqTprzHOpoYjtAviw4EjIj+rjYa34/U+d6fDMnNiDF81\n++Bffu+2FomEpfCrdhWl2vtkJxgAP6VFUdMvXICtqg8AhfkpWcMyFk06P1n8\n9gSUoGLDY64rFD0hRDf/iI0/Mzuo0/8NWiQLoVW421kg6OkgHQKYSDPp040N\nwcgfI7XfNvqmklaTGGpwoZE3E+sQFNUTrEW8O0Q3P8vtZX8wXxIb7hclWsmw\n9l+e306KYtm8J4NLHId+C1TJXRC8MmgLhPMUqnqOqix9TXn27sa/66JQYbTo\nJiUCC1FuyzLxihQVf+YzE9fLMk2MrPvA+vqRvY2YZF/phwIR7IN+Z2dK2wzb\nV6EyFomucsgZUcxNt3JjZdUbbMfnd+e4UXpBooiJqSYwGVZ5MgUX4CzGWE5C\n9bBWN0Fz0qb9XU048dmiWhTVZ2AY377SI0H4hekmUIEUvBbArQSkSMJZPIxV\nCR4G88dLaPCsdpFlhIcs4165PvtWW+gFscPSYnr8ax1lAaS+JJwWcUH3a9Rl\nTUfntmrXJdM/kKNWhyfAL+08wFsOEjhEyAwFs+TSrtwFHZyaRHIDFypS1vEt\nD12Z\r\n=phnd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCternGxBAGqGh05Ftd4fWJm+SNIXH8uNC0qjiZzE5zzgIgcNT2s89F3QYJ1PI551OYHaFNoRTOBFJXUGm/94KIz3k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.edd465cd.0_1583280623281_0.9178111553852846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.9cf5e9842.0","@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/touch-target":"=6.0.0-canary.9cf5e9842.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CPYAIDQyqnHqV5YxdN/XdygdsN5bL+raCXcSsZjPaoDAO6MUg7yO2ixvI+jhqoDRP7Yxu5Y+uG18nJmXzirG3w==","shasum":"c5268371291ce517e2c4ae40ae6839be99bee732","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA0oCRA9TVsSAnZWagAADNAP/iQxQjCFYHkZHKYLTc0p\nV3Pvk61p1ckWVl7ux6vXE3mZRycF4eRIYA3dhvO4oIztHHYSU4rD2Gd+kNxP\nUS4KztfxldsQ87vGa0b+6c0GXXWKWkQcHl+HG+rvz8y/exKEIMCwEdY4DrSP\n9MpXHqpdJXWKxQoAyTzKUEakaSL0mLh5LUd6t4YozNMtgyYEmwItaKbkj8tu\nSCJFjZKmvR+TbNIP8WS+g24TRiVyqSerxK+VjvFZmCtA7/ySm3AoQ3DRijxf\nqXv7T+Mi1OoZp81wUOJkaph+kq3Knxv5K3/Nj7nmItAH4LlFDCGMKH8IaQWH\npwW6HJncUZziSF5IE6dhc/1pacXkSOlIcZ+K/GYQoJ5LXip5xBkCqxB2zQqc\nt/16HHSRFEWIiTwjEBEMGDrZ7Iqe++6kOFNa6TeLoFx9HCeiEHorraH+Fbla\n4DVeJce9MeGpkUVD6fYsFAe5ejZYZ2IyACiTUJO3s5w4uulG9SNPeDa1Co3Q\nt8/x8vsLIFB0IlWKzMTxKvAbv7WP7Pb8sVKKqwpMJiHJxexMgLkv1jv3+RtT\nkaioRMdelVoa+HvYERWfshrrQCtchCDksirkolDfTbHrNwxH9wZcykzOdfIk\n4/q786THou2UHwqe9TAswHcikcOkkz962tlVXhuBiIJFFbl2s/vc5r4qh2U5\nKF2L\r\n=yztm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzTqNj1fo+NRdT3RahWS2hF4S5K7tN7LiTUXX4E8rVhAiBDBG4v5kIBYMM7A958W1Gcx+waYOkMlc8kmAjReMzdEA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.2b02d017.0_1583353127983_0.4995724467158116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.3657f8863.0","@material/dom":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/touch-target":"=6.0.0-canary.3657f8863.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3pPNMHKy8PO0zytq2M9MCxrmprBCn3kX2+HSXaSJTGze5zTxOVOxRwxadMaUtJf503HhVGoNLtzgEYeM5gMgog==","shasum":"0d50023a526e5438a408e267e509921c63014af4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCErCRA9TVsSAnZWagAA4iMP/im9XIxDmg+o2dxz8Sa5\nCzWknpUcKUOke9mk+2bBoDKZRK0cYzbT2/YyJXj66AHMmETUkRvFsS5f7TBn\nChfejfmfa7wsaQaQHK6keawi5bdQtUQUmAhPPkC6U2aWMEX5hxYCGgqNw5o2\nYl6SH9paLmqCYaeI+y9QTNLE3znp5BZDVcO1/qz4dFLF84x496iy1CrjS71y\nLUO+MhEwBA7Bk/b/muETo1Wq/E99DsUtyjyZ4R7t91smjeLPxRzfpU9IugWT\n0W5zlQ2sZMRDtAGtXWTFADMi5JT/+pOG2VhsfyyTGCLhQVkVWcN/9q5J7Bow\nwZUIWnn/4pnIF8Y3vaSKzl0c4RtzzK3g2Ip/nWx+KMlrUGNEmOjuyA20599P\n8ssJ2I3eGtBChREOVZH0PcBrwsweGUDKKBK0kocAS3Edfd7g15ZLXmdc2QBZ\nWUIUWTcB6HcFYJVBYMyCki0ekDCs9XtAksR71Lbt/BII6SNz6Hy/BT+7nMT9\nfb96nqMnFDq6zY/GeyQIIy9h+clwZUkhBqH/oOjnL/eLdA1gEoDR0Y4k21PE\n2fgcSRam40/uoV1CogOpFnDOaJf66g5K0EsyY2mabod0TaRU24Mt0SG81QQd\nh/1Ib29S504m2nJvtgN3QHy6oixPQpJfLTTMw015ykUpG6udyegwIYdBrX4q\nv9Xx\r\n=7q5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEdGDkUpK3pNc2G4nDSHAqPYG6/tI09t0ss7z1RaH70gIgZxB0U2ZzS7XXS0VwpWs41FKiZfr0T+qCNuzTGYKKQfo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.cbdfe453.0_1583358251075_0.9789374866439151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.17b9699c4.0","@material/dom":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/touch-target":"=6.0.0-canary.17b9699c4.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-czQXbu5aozPcGGjuK1l475h4/6WCNUEFebZBS8Ij3z7lcE6x97s931YSeWQ4LLIfd+SNF6JJEjnBR1t3NQ1nEA==","shasum":"99bc938e0eabbf01dfc24108d4dbe7b1eb95992b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRNCRA9TVsSAnZWagAAVXcP/jrGtG9eCZvM49MbOUTc\n4mJ2IR2cy78mYB1w2X3Eybf9y7rqrQHa8Ml0skFkpxB+IfrDJ2jAlJ9DM+jU\nK074F/jwa9giaEI69qH1jycjDMdrDgs+CzEyFRR5L9gLH9+ex7Mhwsv8s6iu\n5wCVXy5f93V2Q+2oPTT+ytpX5vo+beiy/bV9S0MnSTilCVXQ44hRWUBVCANu\ni7MpVj+O3VCHMoHNBahwfdjnPjzW9WUqNu+I4GrUjhtN1BbUjC8+Mwd6+dV3\nll1iKy3HdFsX7v90j7cyVnZWZLO4snarkKEPs94/+6qRZVWhUEOuG6OtDWEf\n0OZqDN+x20R7PFWrJQ48bE8yD3Rq5xHHxFh6SFipfugfcatflCEaGvlTNnwP\nXqTmQMMJXgxCOZYDrqiG7BpledhkK2IHyV3qeeNOgLZMmqc0c5+qMCgPT8DP\nVMpAVkf6d3/s9bMK8Q8r6Lj/RGIQk1MHKnlQVQnxGegvJIKqRNqPPErYALS4\nb7m2ex4qJatVIqydGYvM73DrHawjIPyYcLRLIt0KgJ+pWXJN7uu4R550cwrB\noXr8achsRMVEqkPlIF5CE9/8eggBttx/vimg7QBrASPsT19vqwAvr1WaMCgG\nqQ+8CEI67huLauoBZJQrka9y1tJwEHqKGvZD3ul8kJAafyL0/VJt7ceYwQYx\n/EVA\r\n=gKIK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1Mvu1B771pnDqh2skKaaAbvGUine5Qxwc//y9QaHKZAiALL+cNwMGrvfQfeILsHcyfujq2z3RM+jiLZC6TetxfgQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.02aa8a98.0_1583535181452_0.7603869721986625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.17b9699c4.0","@material/dom":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/touch-target":"=6.0.0-canary.17b9699c4.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oPX7KGyfxH6/nUpL5v89wU/X3lkCbE3n0ZwSpUa71k5bXn5hf8R81IzWb1crA2+KKU3fAk//noPEAtmkE2NCww==","shasum":"ec652e3364deb88a8c29a73e78248cd710bb17ca","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8WCRA9TVsSAnZWagAA2yQP/2CdAlLBAqUBf+c6bIYK\nI+SbQ0KehAhMq6Y9t7FFbk0XvIvcg63hhzrcnza9KpqtRDSOVQ7aqabVZ2h+\nLRCTHfFN2XxVa3GE8gWXT/xW9RYm27LfPels0HwleMklQhnajaTrFbA9NQmM\nBA52wE5k37Xz3jupt2IGrLf60YOhAFJwyQWiHPuxY1xJddi2Co/8Yq1pfVCg\n9usSKnxWLBcjprhcekl1sX59UxFeLT9ltU7CTdPq5AwxvwjuqZCC1Thhdk41\na8n9KkDNmJ+Qu22XUuNPa63KrrrHCx6nDClvDS1gGF69JaGnazVkZW+2LKJp\nWIEz5CXiZHEbsEStWQVUF4U6Us81HnrDXk5jTD31OyCuyM4w0zQOA71Y9znL\nM0vCvl3valYX9ythjBLczYrz1Lxm/DL2cAsrg7+AekLpWM18npNdkWXNeX9l\nAsHbWvKlHuSPsYWbpZPwlHWl1EZg7d+5yOGl7owS1TNMLFiBvfjP5GRHvq3u\nYIhSh4jgzMvt8OLJWdUI3aFYgyIS/nwcMjL6AbT7cpsf/vQslG7wyLm+JKeg\nBKso+UFyMr+cGJB2BxFwhiyeTu4VUYHMaAUaUPAgVMORBJxrB0jhxfM0u2KZ\n6ISbKhnIoYT3THZ1pLiE4rU/cAlUI3D4n5otzx1wq3wzsL5wEwHEymENf716\nQS/e\r\n=n7eu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhT9u48+il19g/LOpTcxDz83ae3eTbCkO4b6/UoAM6xAiEAof4K3ILvLTrCr3yQq3wWuaA/gyLOOuEiJ+1hc3BxZuM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.7cd5aad6.0_1583795989927_0.19924685600205128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.bd33cb56b.0","@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/touch-target":"=6.0.0-canary.bd33cb56b.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MKxlwEe6s+oUcaJyXMTTt2dvSkn3FuT/5PQiUuSIALRF5MC+waLV2391Qt2hTsyTP+nS7VqKdTPABbd2ek9gOw==","shasum":"0abda50f072990fb81e6f9165ce43734499f2341","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwG2CRA9TVsSAnZWagAAlpkQAKFHnDPOBhvxqER95X/f\neWkUgk2NTN60BJkhOK7haufn0u7AnDi4pvImxgLItKeVgkWxyleEQ1uGol9A\nQVxUQVI4UhxuEyEu7NmhJdAVulABrJDjnM0rPORVQmbmHElephF0q/pRurtg\n0i1JQTGIi8O1ozYP8zjkeHVIn0QsrWtLGXXikdo1Meq3gGMzkG7TRr+pZcLe\nbAEXQ5HYAGJUURa1W5n9kAzgFflEl0RH3WKYHe1YT9R4+L7JatbkT9lVWS65\nbJgk+BI9ZqBMKfgUdU2pUisdf1sBK3IFRFY7nmcmEwAPI4b7IHLtvD+Vfqvj\nPDO8ykbJ4vQCgkhx445E6jYc0tYDGCByDLF34ufx92rgdz+xUpvQ9tcmfQJ9\nARm94y/0ZoM5KyF2JPWldJiRhvy/mnUq2Zwpke4MTAAebX88O+tWntDwvg7y\nNVTDfXYTSCLBpifjlNR0aOYdy+AVJiArIl1HxLGrtwbey6XczKQbg3LccBo2\n83k2JlN9OZCRfF/8RBp6ag856I6DOGlHyiHNOJyGZQQiYxNskijl9px5PWIR\nfb0/8LXH922CPK9exCHIIdgEZBT/FuEoLrxtKcyS5a3A01BpegElb/KHAvwr\n+lBU8NvbXprXAGqyFsadjIPeIb8ex0L63WFMcP82hKCk/e65pH83y+UqGuqw\nw4em\r\n=tv88\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4ZgiUGpMXi3XUiK364cg+V4+yARyTGNoeHnvsdAK6/wIgZimZiJmxaA+IEnn3jdh5nHYY5+abYP2VXHS8ceuTtq8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.3a79dfa6.0_1583808949626_0.5900260105625141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.bd33cb56b.0","@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/touch-target":"=6.0.0-canary.bd33cb56b.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hY/qVLpqBrO26zVFHF/ui1a7UVjFO8yY0/9Li8242QLYUB7EZ3UhdTXcTdCP3VuMP2UbH2eBczq4GEMgP6898g==","shasum":"b6a552132ce7f906c25b8e556de639bb30221979","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwKoCRA9TVsSAnZWagAAj9EP/1tQWowmRkIlLuCWmwpV\nsu+tczsawkmRuTWYTuvLFUijiCt3eQrViJJDLQu2OzfvzQOY7kNngvD7aYPB\n9/EYz0Nx/9VMB8psj/bFzG1cvy6HNtP9QmckeNZsXFVsHJbAwHw+HIKqcniN\nP3XxJ/NPwiamWvkTIzmcQGYWjXnZM1GrDP/tZwnEFjAHBdyRXiQVQJgQh58d\nYazcDSTlmqkZjX0Y5jxAYtuqHddorbJ4bh0Zmc8DFckMuV4NMsoPxG/VHMIK\n915onXZPcGnvbSrOAEjSGkY+is4zWutqWNzooy0b3vUhZDsbuiuUU+7ifnCQ\nhUOLXHhd/T+tUCJ02NfFU3osx5gV/wY8B72lEKZqbqqG9GmfpbSpU01ydsEa\nrFS7aNb8plH8ngWUZDRuh9gWs3aoYBhfmh6BFkWwa054+89sHTRKvBPFb64f\nxkKRYsjQu0X4pYAnw46Z8Sy6YHOwISY4o9eMDYgU3g8E8Y5G6hH+IvGgyz7i\n6LU50xuKeEfVWgCh4OZSCX/Ly4tf6yz+kw+91T6Ffpce4bZ5TUN9wDdkhc1c\nsF7MPgrOXPeLyX7L/8HsB/z5JMBZNv2AGj7xubtM+1515aSuSnfY5QcBhyCt\n5Irope2eBcrqov2ImzySE2R+3IUFJQCQGk+Gge2pb8ieQU5MxBjWc4/kkeJS\nOH2S\r\n=fhbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwPMcBKBlwnb/S3IX/xSeIgriQwmJQsahTSTE9TkwVnAiBRBDPB2sw6MnDm4aSsB14uQH1JNGiudqfEH7XxnJUkGA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.22e0f5c9.0_1583809191971_0.8574830310769812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.26c049afa.0","@material/dom":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/touch-target":"=6.0.0-canary.26c049afa.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-j/AK1Iut8835chm+NTzCvIcF37hA6UfolpbxI97wYFH7hftfTZeIB1lMbcs9ajMRn1/p8F7bk4qYHb34wbzGMg==","shasum":"bbaa6c1d2fb10c244c9843eb5d677b88b5a4779b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/7rCRA9TVsSAnZWagAAKyQP/2nIaS0hSdMA5MnNNdNF\ntPQl/IYEY2kNM4pOhSHnYksPBawwqtNY4Qb1qfswaY97tQjJ1oDY+Fz793Gy\n1tb/MichvkElSaUXZ5inP0rAmxuPp9NEWY5FH5HGYbT+5qs32/P62lTGKTdg\nXf+tdFZIYGUeN6hd1FQLucOEDy6hLAZ18kwseUk3NGl1Js5zetLeI0ljhuKa\nVkJIAx2FMyp1I39E9kNPfRD2zKGEqVCXMIzzEFA27c0xV5y+satYgehEZB+c\n0NaS28MgrW4InxakpmdmgH7oaPMSxIlh5JIXhFskSyYwbie9bphhpboWnp9i\nyPN6/8XaIOOUGY7E5Z9bgZQ5rdf3+lAfDJ+SteEOF34jjFa+qwLFnhtfELb6\nJb9y0TvAOHL92aYDSkMpyFQSFbFAsy43CPKtm6jwyFxthcRe0NPQeETcck/i\n5ShhczUBteEcCJMeqlG1IaZoumnLekxdhNsyg7vBAhSjY2wxQ8CqlwAZdRvY\n9B9YJP/qRJTEjW5jLRc5po2EaFkRLXB6tkt9Nz0YIWhBuV76poLhLSM/DBUG\nLOp8OcJVUkmqFlxmPR1FdeAmJ2VZmZTy1xQF2OJgb6+zH7c/F0o8IC62I7Ve\nkFc/qdL+bbZ3WZDwGNtPkdHfmXkgEMSognyGOxRsJO12qLe1ptk/N87prGaW\naUUo\r\n=FvLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhEyhsoRutGq9DDzN2jH8XQLwjNLnsZv+CeUACpp9NLwIhALw+GF8ske0BoOKnWvNejWPvY9yJI5eIxh8vPTjhKV9s"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.f23a1d1b.0_1583873771402_0.48573633024817275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.26c049afa.0","@material/dom":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/touch-target":"=6.0.0-canary.26c049afa.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nMjvSHX/d6JrT0a0FRvVfYqnhecHAZ1akf7eFm94LprpQ9jZltNz2bwEFjiCLwsrCp8RJft2BDfshfHdUoQLzw==","shasum":"794199e66e7dfdda365c2b7b9b072cf71687ca8b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaAMwCRA9TVsSAnZWagAAD14QAJiMz+qJLOm1Cgb0fddq\nLePHgVWzrt2ssuKTuV6JzJKg93wzfksHfiAxAbZ63X6EZLWABewYXWsfZ+wf\n1SBApyd7CHU7jnYuEIuVSwSIkq/5aqzFEmN9Zi8Ftdni8ele0XBhmSDj/HUz\nXwk204VRj/7sfezfPXi0dzx0J6b6mEfAdwbnMdr69bkavoGbwvSgzqcBIgG5\n+vXvkVgAz8cv5aJI9rs8Jbzinld2tTga7E4+Q6FXqwj8XPTf49xXHaVQR/6K\nmEaYnz+etKT4Z4L1/g7LnTHj0UVdFsnfyJRUacrYFWQMhjcRKUTCEYc8MZey\nDNbN0OgUCwZ0j/PZwrfdKj6sqKYrpPtoQygYacTCbl24ayXggrcO+X7uqCwE\nrFZWg09FrsJWnwNSvinJulg8zLLvfhFchUBWr9ngiRs9CMVza8qCP4PwXNNS\nLjQsjyasr7nRA76axbvqFtY+PbX4L49gNwlfzAvu8Xh6exGKHNfwFr8flWHS\nKXCJKsmQi+AvAS8MqHp0GKLExyuv2B0AxMUns5vDKD+ydRKaCKIh8HEoAhGx\nLoTZ/HcfAnd4i7bRyzlxEuH94I3GGvekNs3gnKK3tiCUmMTuhpgbrSypk8UI\nZfsSeWeNKp3DO3Z8XnZhv9FsUt74xWDUef/UE5LhZw/6IrLXSrf6Qyr4HgCx\n58YP\r\n=wQKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC406M7Z4wKejDhtEfeLM68CPHxOg9OlysLO3SluQQ+qwIhAKG/lNBzVSwNviFu/1b5mA53bo7NsQqMWvvA4KQlHzIS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.34b2d69a.0_1583874864399_0.5244974796029669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.1db5c9fc8.0","@material/dom":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/touch-target":"=6.0.0-canary.1db5c9fc8.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MYmVS1YfkfHx02dS+sEmDxX/y1IwsW+MSpqPguJdVjxWfSSnVpt3iqVHZpgCG/l8cp9aNy8qQ7zVLoEHzqe0HQ==","shasum":"030ef6dff81354318bfaa6f3467de8bf301facae","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5UCRA9TVsSAnZWagAA8qcP/jOSgDMl8b+q0UwAulcS\nO0fOibGvO2dXIxSXhU9UsreqeCImsvP/e8e8LddVGAusyKIPkNuVcuTxOKi0\nE4rdvlh5dtK+iBiIj+h9abe/aMlsx4F2UoRrlsUo40h7OQ+4KBZyN7aRmiND\n0HKtzbtdy5IXFdbZL/EwCybISWmK/Z7tamz3wz13fo1JmWz6Jh/PJUDMocr3\naYDm/YUF7xxrqpvoN7lp34ednGu9r/JvcOqgb6o5f5m08/wiNVfNnPXrLtZY\nO9nC1g/Y9e6wJ9BNmL0rKZ4IvTGFde+osqCqTUkAHif44R5H2/tEdEHjNTSl\nNlG0jVheVrGiXFhS6XBzJa7EBklWsU/tqBi65RoCCYYl4ZXgvDhL6/OGovV6\n2S1BFSPSg12f6B2D160O9xpLIfkLhFQ5zRdx+c+qHPTNdiGJyYduaezyNRr3\nTFQa/onvodwvKiNlyYA8CGKP23IjiOEH8qSzwfleWKtItTv9buf6ucd7w8EE\nNE+ajbWODmCJ0xp68zZfSqTZG5bw1f0a4KjeQLRU3TNPtNm/cCcyentDdv9L\n3c3iMj+ZdnRYcYOduT/9AnDvAbyVk+jW2BtvzszH6XOES79e4EAvWy8tf4w7\njLe9W8i3LnJ+ouBihzUdNrfm0QYPAcDampb+mVXk+GmVV0tj2tKwGJyvXmZO\n0H/a\r\n=/Bth\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT8NYdtZMqlByN/4LkyxZyrGuiIe3AZ/tJnR/WbAdA9QIgD+rl9uj4tQW08/NxuxNMrBPhPHRkMcDoO6DkBttXzsA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.dc04abe1.0_1583877715720_0.22007789666353283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.1ae8130ce.0","@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/touch-target":"=6.0.0-canary.1ae8130ce.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JKAqtJ24ywDUKWbVQ1Ax2eJIN+bWys3E7SwWqrkXPcGHf/RN+bmBZPuw/F0BVcDcQ8KNL6P22ph2hPnP2KWCGQ==","shasum":"3ad9d6cd1dca9e07dc7107d3e1118f80cf93aa54","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIbCRA9TVsSAnZWagAALpMP/ix/iJDFT3e7ECjlN7lv\nLP5Om1Ghhpkr+FMMKb2qv6nI2L4Oc4OeKetJpzYltSwjfoN4juop/0KUPM2q\nj9TGGEG1vSWvHiQlq5hzhIUwbYaeqauauFtnRlUm278hXSRkxaaRcY95IVD2\nCxgs+Xe+eXIbV4zLSxM8SeLu4El8a0qeexRsyXKmW2CAQnAasozuWxWIoHSa\nR5VMrPamsZl5yaKHsPogWbxAOP4heYcOJinrn8GcuQfnuTW4Z2bjfCRKazG+\nTAQaDtdtp1YvKVvZNQOiVOlBIrT11sgKXToxaoGLLhAoMNpmKO+CTacJQnhv\nVqz9jMZgygBQbo1IQejjdmdnUPvY2D9nwuXQ0B9TQNVBkPvw0m1Mhp/XoBDj\nWrtmkFvdienbF+F3nGFE5BVT/LFecHoA7MP1THFLax/hK6Ocd2F3mYhoyz8Z\nu+iHqQlwkkZrbbEhhSjq7RRjfvksm8LXoB0RwvDOYbS+a1JVVMm571ghPO64\nDyJCVoOEMm60y06xpRCriAVW0JlUDbU/n3bgYPO2f5AdIHUkFO6/AXqBekQD\neJMOFdIKsuOMhD8yLZoexrIqJ3biVWd2Xgxr0dY2VRVBVDeaw1X1ijOA4Zcm\n/XKIrs4uW1BTUiWl198mu0NzglL11RiYcelGbV8SN2fo5LjZCKQybxV7eETG\nG6Qz\r\n=mYtu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3KbFDuj5vS7cDRthEy/oc9Ph4RGDeiAbxtAiWnaBo8QIgbWtfFHJcoj4GHbGSLRrNZyva5YkR8Rv87sBGUxlnDDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.04ccbc88.0_1583886875466_0.6717323534373565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.1ae8130ce.0","@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/touch-target":"=6.0.0-canary.1ae8130ce.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bIXssXIncawukJxoKXddG0o8gOJQF+CWIfbhXTJI2CaLUUKj5IyA0tIwl4GXXVXmY8FsAzsykMvEibrGdV13Xw==","shasum":"16ad782122d092d417261f2b631f87935a8fdb75","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIWoCRA9TVsSAnZWagAAS1IP/0yTBE2pGftqaDITg3rS\n4Ky73plDjUM+XM1Ta65wF7h6n1J0lXyFsxGDikqy9MtM/igflveFTIh8VF3G\nwebEzO2REAwgbtikYDzeo+1DkoiKwyNhiTXKbwEKgGVhtDnpRHBhJhRph9Rd\nzPKK6iBGo13nchNpxFGySt4I6i76qQze98KbfaNwz3Ltx3svflp1V4MI/QKU\nDXzEbqS53X0dnokMxxMkQUgUPObf2p9rPQdnkFsQ2OyaaLsOzvI8UNMKjGlA\npTFAI0G+kq2VgiIR0hQhpGo914cb9MrxRa4xRvMudkG73fUr3r9NfEIM8aYg\nvsvAsbcAMzQgU9mEDK3yjedITo6lrXqmw/7+lmmHuQh+gSpZGjU15WWbllAk\nWPV1YcW3fD+lbWmZbZckptkWoqcr6jJvHL1UR+L9gOAfxN8ljKSoknw68hKY\nPwJKxvUcR4SMkwzMlQncoZKDA35eO+pbjmRJ6KYgxLW+dUl+jCQUQ4ttfkF+\nz1w+LHQ56Vjp2IoS5wvJ7FpV5jK/SJ5bzNl4TfugqvDlYCkmpjhGNhJqOfAT\nrdf91CzV+zFFH2ZjOhCNoIL+U35sxXDHXMGFXhBmFkLpgiIoLg36nm4Z/S2/\numxDHmjpZ12IJbNksj1lTmcP+gNL7c9feFT5H54Bo1c1g2eu2ZYAHnZzAzAe\nYDac\r\n=oy7F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAz3T2UrrkghhahpFWu4H9F1vYVaKj5HH4WHk7pfIbilAiEA5qha8x5W2D7gikoHyZqHDFYAyR05jCxxDwpQgX2KNqI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.55338c25.0_1583908263827_0.8748685170362163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.1ae8130ce.0","@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/touch-target":"=6.0.0-canary.1ae8130ce.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AR9B9dPUFKZqxBbj92kAXxAJry2mF3FuFP3deCBwipJk1qUSq+yygCRl6ope29yxyeu3/Y7r4fe4TnSLOLh9wA==","shasum":"b652fb4e6c8ccd7cc0911b9e074e7693086d64d4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfLCRA9TVsSAnZWagAA0XcP/RativScv4TpAP4Jm9GC\n+171OQaj5z5cGDh9igF69tvP3zrmz0mi17Jd1mAz+KMMUc2QNlUIfZBHaS6J\ndz25HdWeJo5nTYAqPBCQAcXnjhK2Pd+baL1VzoEcnn9LDffw9Tx+kZ4HBhH3\ng64g3YNWIOWQ3dVuG2lgvy9guW0KEzFmSec2AJgnwnIHJFG5qiGXPYwYMhy2\nAYUSDHkU7Fa3pFQH3KBm8+WOAfm7u5Xfl9Zw5t79j0T3n6ZjNBv99wOYTZqD\nrqhfx+shQKCL7GOjlU1V6oltzEfF8XY2hgpLG4Idd4lLjHbNeN0K/qhYDrOn\nt6Q3/aXnQFQe4UsUbKmDx2iqSZUMbvg1PxhxegSCnpUHmLIIgWETqQBxwZfT\nMOGPwgO8DxROiHtU0LPAP2E4iTt9Wg+FX09sxqG7KpiWbTtmQamGywAXpLZM\nj0i6YvpEeLl2ioy4KP9HbRlXl6LbjD7LDxnml6XuYWrYPoDW3K6r2O2sqTAd\noefViXxeB0xxT+CPCJFwsEYrBKJ2i4+sy6d+db9G/pfH5FMT1yUwRQhFQjOD\n/cmNPW5LhFb6FvvI7X1/dgSp5GruLSqu2NoEP7HvAQRn1w/+LNyZW+FB3FRP\nUVAUTvznEELRtEeVCdQ6DgVzuIJ2nFvgoTRf3/CNHcPOTQ9RDIemEN96wO/F\n8Chj\r\n=/QP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCal/yH1ZRyljFUw6YL/Vl4HtF9HhxOFc9yeFievtvP8gIgG84qccLRzCjryAzAvoYN8JhlFEKmfQbBbT53iIbaILc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.b7e388f3.0_1583957962845_0.5663348089013123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.1ae8130ce.0","@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/touch-target":"=6.0.0-canary.1ae8130ce.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cFt4Zs+2JM644QIMlHekv4zWozGcplAF9mG9KWze4KEU31Zf9vz/nTexhgBj/W95xmGGX4SJqn7iNJ4OKQMBOQ==","shasum":"58cfe628737b23e068a1206f44c53ecbb5e38936","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjHCRA9TVsSAnZWagAAR00P+weJBJiNWR/7854Y5N3x\nJeRnWUkJVNSWVRtaDtHaCfrzqKBo+bAM90qzlSZLrffB35QUa2NtcoAKEj5Q\n04mb67y40vYFmw44AkfCc6oWibXBB/mrHMZQPdYhGPdy5qKmvGaV6pJNv+07\nLK1VJ5X2RMWttEuPRQ8CGtItSN2dEFrbahFDkgb/HV0u6nuJ91G6WSfzpId1\n9KI0dZBXNJsLJsnSSGSBtAfxf3ANpTe2ZyZarKVVRNy1cK28QmKSrEdzI8of\ndtG+VUi6HiwFGJoDiwmJmSuz6iYDIy27DuIb5sfBoeRTUFj5sdIU2vfgnpqd\ntM00dIm0qc5HkB7PwSJwPXibMAwDMfhnlnViq9ZH8foh2qbKb3zSdA1Qodsv\nGri1XJPfguOeGMr3WW61DX4JZlpzzNPPKIHavLDlpaam1m1x8XxH9wzJVgv0\nSZd4wsMXOIrKXi/gPM3GTSrPSDt/SVzxV5HckHLMHiCOr6cBPpPFjBDUIjnm\n/BrJpZ1mYossqitWmCw7JTmDcwJWj3DNHpU2IXjiZPhCnRbRogTvaXuFk8jr\nNOvqmBycm0f1sW93YlHuBhc7GXZ9ykaU0LSTLB7nwvDAlOfLcuaImDXM4/t2\n5nFDtnwpxiulYC+l3FmGytNViTRyJ+iutC8/f4WnFlNxxNU/Per/FGZJyF+2\nmwbQ\r\n=MOij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeXiA6HmGcjOvy2GG4s4408bsjEUzPVN/3I+buNM6JKQIhAPc9RLL9XmbxRZWboRt9HrJQpKTT1ofN4WaaVLqdnL6S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.b3211481.0_1583958215434_0.18324428834835604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.d5808057f.0","@material/dom":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/touch-target":"=6.0.0-canary.d5808057f.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7j86vpkP3gf9fEGjPSGhGwi+217zCnxCj4+LtEbLGgMMrBBQEriEg0HJsK43MCQ0vmmN8/PkftbPQ0/0lJY/FQ==","shasum":"8073bf40973fc266029764222b6029e13a1baac9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3WCRA9TVsSAnZWagAAxHwP+wVVp6nrWFotkssOCvrs\nsx3a5uQWxwx3K0/uPy4FZB7U7kazm00OeIDIy5RF3tuCRg8fkoZRGWZERM+V\nKYrgUQt3qjIP5t0gdFy6J/O6qLc9dtU0+mSUaN0TqQA//FMAGDwqJH6oVbZ3\nPu6u9AO1PQtugCSWsxIkIDkVUTC1TpciyhOCfSV4aUkFotN+pwmLDM7zsJkS\nbuGGrSIl7YjOL9fKKJ/2N24Cmq8Z3L8Mu6KAEXDg8eV+3xuc/EviPUq5HUEc\nUFdJvO5M0qRW7Qvzd12eCVVeayU2B5XCw7SvA54uElPf6Nva9a2rpsDBpQg+\ndBmve3Lo9jCkRgth3TqL3uJEaDKdLdk+pX4wW/1cgvH6yyUnoKEJVu2RXREM\n0fJXoBypxdK0HkcQKXuiiubqY5F3tEmZ5guOUC+KWbERK2ho6F129E7g8Oqa\nVu8ZESYbKG1z+WrmvdAtXhv2mk9Zo7GUn5ulZt53lhZg6/4wxU1uMKaYYk09\nm3eGfZDEDs0J2et/gQ3tuxxFDFyC2od1ljLG68Wel9qgsb3b+/ZBXoROoqkm\n0d58EqWxoxQIGnxH8ShhzAVgRycBWmyrmGio/SjsRAXZKE5t+0G8WlrN10h6\nxBBdch76ud5zZt/ZETkpDQqEV5Sj4bA0xch4BOvcYZZYB2vPUCPmltGJAhI9\nykIi\r\n=nXav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVivQu4qQKUkBT32JTeam44aBjnpLsua9r68VG7WgNMgIhAJcShndkPD1PS85ttPGLceC58x7H1FoD7QdsA37usEac"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.0b5c7f23.0_1583963606045_0.8872922775383991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.bec065920.0","@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/touch-target":"=6.0.0-canary.bec065920.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Z4ZlAu23xGFm1LjswQMdwk/Ita0D2/bjtX2vmECYOHphNnLBAu0Snru/9S9GEv2QGh8Cf/MNjwmnVLt4x/jfjA==","shasum":"fd4a0ab59d187b87765d692a31da0add1a5d6488","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqa4CRA9TVsSAnZWagAA8I0P/1FsxZa2WcMBK5WWPpzR\n+8pLJDaFyTp0JC9hzEWrcnqfjTRH1Qd8vdGuT+4yB1L2KJfgzEab6DYj4lSM\neq6USYKqE0Oem9FSyNUbe5xTj8SgBR92Aw1SaMNKS3fI/XNFTAgXLPilvMB1\nAKnAvGQfS7c1bD51HLROVdr2SDP1cHYipvfFCvoaISBfioHBOkTmlr5OVBIB\nG0OG1fvsPuMPG6ii1CI4D22NE8Y6pT8nf9MxlzxFYAC4YzGsOspX2Oncmmj3\ndcQ+Ew2dTSkmMspHsbZPwVmitBHeHyt8nmtCPBCo9QBobOELsL4otu+b92sU\nCCUO5WtE4inl4nYcSY+yzKuZOougWpcwcicFUmNCIbV1ASMB6wxV9fWZM4z4\n95IhA/Xbj36lSKMvJBCuH7uYb98xT72UOBHafo5erJ8F+A5mMIOa0N7HgR4O\nFPHkKV6WPmntzbFV+oFcRivKtMh1rJJ0WOInI00cqBde55iAOnbmtl9Rb4+i\n5zdqc7vBh1ZKrnZqbjix+dJiLMO0T4F3lQ4pEHnT8mMAcmXEMVo0i1AYGqo/\nVVZzmtKa1GMStAhs+fywPDDwqC+Aq71BHMiCSmZFYtzEdNcJKcH11ha4MxJY\nM/7ygXg72KsY3wZ0wL6hNeefv6JgLbl9bNmvMHXYEd7dVIWslfNGjHxcskMf\n7du6\r\n=j1Am\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUxios5oOKtNLw0hmBUt+eVr6yjJI0oww8EOAob79xPgIhANQKc0Rjs5IephYolIZ4zb0ePPsIq1RD8dIlKK2cfrgf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.6c0f0b27.0_1584047799592_0.7493042784139134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.bec065920.0","@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/touch-target":"=6.0.0-canary.bec065920.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IisE+Wooa1BCrOQV6j7j1tk2HgD6dcjZ6em496PpYv3d7wDyOJjiGqCEZrLhBAe8IxZ67JqAJ0VUu8w+4KB0nw==","shasum":"213e0279b3c5a5c8dbb7257850ff0d48f2661202","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":114157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7rkCRA9TVsSAnZWagAAvvcP/3/V2vCK/cVjRD84A1gp\nwZ7TdoceEzMDEDT4QjZT3bGRq+GE5cnWV29g1EubH+6RHfes92sODzykirv0\n3h98SB53ItzIQ0TXSrXn7YLiO7R45mDECRhJYq1PsdzPENsGVLj5y7wr2HMR\nvutcD6ONQa+iYdJCNnIkGShroRlxKfysks1tmkRpHrElJ/zbBfVKtWQr9KgO\nCnLWmQTyXp/Pi8WDZcJWNWjEL8gQXdDqhnHkWFTDhczT28pBVv1iuEzirY99\nmGY80qnZdt8dOA+wA3pAugu1b0uCnjOncsQR8prbtQLmsSYWZgabdG/yXAUl\noI3qOYDUl2/3pK2vii8F65pzrxToxv4FqCXtYYHDZlZuAlPRDNWYL9Wpn47m\nEyhFepjkPHIKK8av+wl32OVDt03/v1pdqYmtGdscfDk+TLtiPkKG7YrLVUxR\nV9VmeBEmS1ccXs2Oqd2ycuunS3HV8K8cvu9hmeX9So7YAH0b6vy0ufrYmScU\nw0oxamLogRq4ds7DIVhYI9SeNMpOKRgP3HiuZyrC8J876xU666keTKiT2waq\np4Pu7zdhW5aYZQYjua7MuQo0TE9eHwbcXaN1VHu6yqY4NMrzddV1fTtHbwyP\nur813rOq6pT4K+SnzxurL6o4eVv+Efh5AxJZtEocMKi8iLO5MSvrEEjg3714\nIC5X\r\n=WQGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKblxCSnaU7AmJaeVGa85aLjiUXIQdXZ76SN95xTCqwwIgOyYrlkywYbd5xOLuwlp/fjD4EtapCNYjVRkiRTsKHAA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.b6c53425.0_1584118500035_0.9945190301591393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.bec065920.0","@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/touch-target":"=6.0.0-canary.bec065920.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+ei44cO8GtPsDk1pdf/w0V4cD6T0eHnHJACUCVDYDwj3zmaPG1rutRpHHvO3n41dTJVa6VYGdRrfrWpkegJOSQ==","shasum":"bfebaf2244626a3ced19f86ac9858e5668bf14b8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5jCRA9TVsSAnZWagAAC7kP+QABJazf/vIH/ukt3o3F\nAcG/fdiOxaRnVxsQ2eoPUvQ45ZTvs62WAJeJxbCdhTHQni/Hh8mDeSjURuQg\nKA9BEo9Fpkg/XLZbzEMg62q8GB5BPAV3kIWbwmSmHWg0mu/FLG/gC0FK+zxU\nlVkoJZ1ZIxHVhZUQ0qaluj+oymV2kGyGr+3yOo0u6bS5i+0YoLaHJqJLnwrR\nK6VxMvstRXiG7OouRaQczGUZ8c904YW9H8wupl9R++tj6KLv2BHflpbo5C1N\n0U7oCOFIQTXv7P3Lc6HHpn4+cKEJ3ylWtI459TIs2uus9Ae7kZJyUBxuXfij\ndjawxGxSR3OFMjJ85GkH38VUFTtQYhqcq7/b2iBfxJ+C5DUF8yAs7TMKQ1hc\njWY6UdkKclF3+Q0jGEIVgKCCXrh/4fdVi6xoWgIrAuL8VuXbGNBxDLVKmjHK\nWlhMGSCk2jhJcNR09s8h+daMXySu2yn6PokxhKkXGNJCy/L9ixu1iYGDmVBx\nQBc62/nsxGTtzoyzEfK11Khbzpuzrmakhw/dWW2b6vws7Ebs37dMCinQpF2l\nPV07noXWmuNIJz2drLUAxHvEYKs40cA0w1a/NKpr3O6DYPaSlFQTrbEIZYV1\n4LE30uCbrLc5bhxUdkz5KbCvNFYjccf3XE/vBf4+ppQEGt6sXYFsUnksBGZQ\nTf0w\r\n=gwKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHLtcFpYn7NCBbwvOroMR1unf5hpnSJGJPirAAhXfg2AIhAIkF5hrEGSCdwlzp4b1pp2BHAF917/3+ueXjyVADUHo4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.306cabed.0_1584479843518_0.3508582927757591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.776291ef0.0","@material/dom":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/touch-target":"=6.0.0-canary.776291ef0.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kmAbTweWV1ppmnBTmpeEq1WyhmuypffQskcSKtwgrYw8fMtDR+IefNB7k7+sI2Lofic0Ff7jewckxF2LJbNX5g==","shasum":"3891f751f6fb83922b27cac6a46324df0a64eced","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/PCRA9TVsSAnZWagAAIO4P/jLaomzMCYWB5Gs1hVvJ\n8zC4VT6LoXn7ubARddQZKEbd+sBnqeObgfAM1J3bYO/WmaL25z6jYkJzIeEI\n7t28Q3GQ5a7htYGuKJAEC/RZ2VnC5F9O34Jzgwgi9eGhsYodXMtJojJELZom\nB5IiX+2aUrQSPBL3dOPcUMAAfLlDbiUE1H9uiVzO7beHKuY/sdRnEFksrY5C\nFLqu7gX18v5vbbhWfqrnJs/PTZ3l3nXlwH2IJY5e7f2HmcgsKldFJp9FXcxh\nPeUdb/2qG+MCmN/Xa7UtHVGJ8aRcP2TTvrMgIbeyyZ/ynusquNMSiHf0ZTPZ\nbnyHCJLjPYq3tw9DG7kLciLkT0j7UtyxQUgSIakAJpcFTTPCnx/TgnNE6Ktb\nlHYsCaq3ORXKmJk3ibM4PkhkYi4rFS17LcAtqFqCkI7oGQ8jCib204uK1ZSS\n3ZvckCZXNVD3dNSrxSnhfITzvaFZhB/xvrZlvSvPo+kcm9NWZZu5vBN1WCZ/\nRxgO2+HIiCCjy79vEMAn7xgHDf1KtEdc9x23Skkd0XE4fe6lO9KigryURRAg\neIm1DMq4tU3rmjQ4UX9V2VH+uFf/JHSrRiHTUpebU+vmtAbpCUL+qHS0pkUW\nEABctcjUk9If6A+C7IQMyzPD8/gSedvgAJa4yvaOa7C1dGKqrwD3blWz2ZDY\ncaUn\r\n=6MLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGnKiiDQpeGv3/aFKxBnsABfX8duwqTZUK/n+Byc92fwIhAJA6W2W3t9iFBYepKh7MVfcq6fuG+yGi2oMgPyFebeJ2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.4e250cbc.0_1584480207378_0.5728675642909073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6b48781bf.0","@material/dom":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/touch-target":"=6.0.0-canary.6b48781bf.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QUxMM6jHkaRCT19FYzU7qRONKe4GswfwzsXqC/pca6/HBiRmKgnzTzPTeiauKDzEeU3Qo5KDw3F+dBMaYCdpgg==","shasum":"47ec3e1672d78ce221a58ce58363678b1fa90b23","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmYkCRA9TVsSAnZWagAA7GoQAIeNXvxahcLW2562k9Jl\nWsdOPsJeM54xTyaD7x4RK7F1J/JxcKG26r+P3sEstG6VGOMLKkwCkCKSTTYs\nE3lcbk/MdM7Bs+ao9xFh5sUjhw2AEbfSmP38afkM8KBnH6aH9IHs4nzactHZ\nrsjgE6os6pqYRmZciFe1PhX+xKRkO1BRyJR3LTRIwfvEQhyXs0aBd0SmW0ya\nF3BtTK5ZZXSVYpj1QJwrPqjkSC8VhdpK6z/i7/vPVMYmdkLPgU6QL71Lg0dy\nu42CijWPNsWeKJjSf87b9iGYGrJnXK8XhooIg6aR7jQDf04wKE9AdoobHEgD\nHDRxiRRbgPaVWxuDljvefDeHU/RlVdyaiC+kmyFxN887ffP5tz5jN/+Y2qGP\ndAVLWzzi0jDJlLbqEPHihboX1QxULPL8AtFXviq4+gI/ymUPGz6xK8WPV/hS\nol31Azui2LmUAZMoIBrZkRWYcnxi9SjQI9YZxyNZufuWBaFu62EdoHB3aA+9\nk2NvkqtoIgWR2DPwTmIhSWhcVKp3B51NnUJiGxvszFrwaI1n+YN62of/9lFs\nXG94h9grbM7ns47f7OxVpLuDdBPPC86BlP33TtGPJQABopbc3x56T18ZElQ/\n2Kjzxowi/NVwTkpVkfvMU/9n/GoEW1wJ6vFOtuXVC/VltoCevl6n5mrpRsdF\nRGaC\r\n=i9hl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3NJiZ1idtboCuKHLF1RKjcE5spiSirSpVj+lcf9FlwAiA+Cq9yjKMt8h1uQNgL8GmRu8S7q7HzFY+eR9GGTlP25w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.ff82d9ec.0_1584555556434_0.2570724698541118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6b48781bf.0","@material/dom":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/touch-target":"=6.0.0-canary.6b48781bf.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zPXsZsIAsMegzSmG1dW6C8VyV5bwh1Kfj7vHrkkT6v+hgzOFPoF7Un0bg79zqUi3R31wT17iFU43eCiFjrNE4g==","shasum":"eca578197825f2c5e26166359ae27486cf472671","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8ACCRA9TVsSAnZWagAA/jUQAINEkDamWiyGTwzXgu6v\n149BJYr82UHQ9JpTv0QGOOwVXFnAYnnYC5XdSn/sMIyLK11Nj2syE3cP6aJx\nG6mxnMjAoXGXhvPRwHdJh8dxJFBRZqdMdtYpS64DxF+St4/DBT202EVuAw6m\nY6z+0Tq+xyyRQOyWhoJeC+nDqqe2zdDzcLVHCrq2kZpFr0TCHwPpTmJ7TSze\n1Ggx115OiTquSC3+edvhKr9dkyl9tE00flKR7zx8aIVPDgDXFpLunGj8B13u\nu2BtnlrUPSQxdx2LzSsXQMaQ1jR+T9mEbbg2tkj3CcrASRXu3PRSNZARcY9K\nXg9N/Cm0xLtiIsmD3oAO2qEnJZzEi3RQaSeAOzSmfp+Bamqx42jZj9cONLDk\nEmXNmRZsAu9FfVvkUJhlXVz7NNRRitDz4gNuYtEI4YHrWb/mnjEXpolL1Jtw\nQKmPcm8EuvY5GWRruPZFHVMwidOSpK0KorP6YOglK7gPg9t6zzE59wcGzPpk\n5swqAQ+OslW2jf/Fe8xDSJnLhYDtSDp4/y5zURa5gD9oUIGBndBCCv0+sHzX\nwauDoHUVMrJJRyJDyVnMRQTFASOqzkb2UNwaze31w0GIZivnN9akmxQ9Clzb\nWmp4qckvbwywS+czF9Q8arVoAWLRTSVG/d0/1mD6/rMSNh1eCjGl6V2cU85A\nzjM5\r\n=AJcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsBp52hLz5FFk9W+n2FlApaIyF9VWsK+i5J7E/RYMy8wIhAObUDN71lki2euC8auNE8DhH05f8+vSrDrEsWFtiHUjo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.f50f48ef.0_1584644098030_0.7822235346497566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-dialog","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.a88c8e4dc.0","@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/touch-target":"=6.0.0-canary.a88c8e4dc.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TqSbF09efphtE3PE9ZoSJoi6lcit9t/4/wrOZTkdPHf1xaSIpfv4OTgLko0B9TNSApE5Ieo3yaOPzV7bJjG9xA==","shasum":"c07b7f98820f6c4c7cd664ae2396c657a148d66b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hdCRA9TVsSAnZWagAAKt8P/2q+Zf5YJfdWqUMvr91u\nvFmYs6wAaDydTLP4jUmT3OOKGJBPRWXkX2UZtrl2wRwPvjOI40Qd9F4oDdM9\n7cmxqoUFhGW/OGc1b/6c76HYiA6ABviTeujMPlNq6T+sK9ay6X0FrRZbbNH9\nGFwovfk0lJ97MlIFEbR+N3MZ2KefKBypPp/r9bTeOAEDk6KeDs86F8MuvbZX\nbOigXV26h/WCyeVLzso8ncZP69jeBSwGXv7dPXGaD8dFMB3AirMBLFfmrSqs\nAt8P98rrwHyLeqTmjwnQYNiyPreDPDpucwfV16RYzlivVmxCPoKey7gNdEF4\nl0Fbf8PqEja8vEvCMN6QiwYvjgU6Vq9CSjHApagwNG4ncv5KAcr8+n2L529f\n4sp5UxZvh54vGJBmXOyFwOPiOgOn02WuVT+QTk7kZZ8xgom5YhwYWpGpGQf0\nB0gctIsC/aoStCW9sdkfNRtg/zo6si0mw6Z/aBMn70R8ZiNJ9SxVLc9yH9Y1\nFJOEMZud2ZMdENuSugZD2gKVoeaSBJHHL3zYscG6rPR+ZqwJ9u/vS2is5qqb\nHnMkldvkYoRA4dqmJnhGGkGl6ISokDpEgwjsuLk9aUWM+gYdppubXxJFR8Ky\nK7F57AI93mzcpAyhN1/9ON0rr13Lt6+omE9W1zpArEOkIB01bPQeGx1hPWYB\nFDIh\r\n=fN0A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCrgpsWGmjlpahJlGaMj+9m9fgTeBj2Qh8ml+vm1C3MAiBGbv0vI9jkalAPuE6VdUQslpLV4p1nOv3O3mfp4/69FQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0-canary.134cf877.0_1584650333174_0.3649850998735409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-dialog","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.a88c8e4dc.0","@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/touch-target":"=6.0.0-canary.a88c8e4dc.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-53BiaLS7Rt6RUGv5WIL0BGVFCZZTHWma4/qV+jVYfjeEM2iUHA3MZ9unF86t0YO8H5h+NbNy5gcsyPErn5w4fg==","shasum":"02ca5ac81025876edd7b5bf9971bdd942a6f3f7d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.0.tgz","fileCount":16,"unpackedSize":114299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+P5CRA9TVsSAnZWagAAo5IP/iG0/U+pLyc5j1/tP5tG\nBIPui4yuVnymqypgKdbtoBd5qj9sx5eDLnynOlQ7XjEM2mhT1A+RnYJ4+Uf3\n/nimLHUvN69HMn57G1mWM8AEPaFixWJFbpoS4F1slcDymw3zUJisbUM0VVx1\n0xP3WqYDrPXTsjrCuumMMIyfIg9LXK5fsTSd2fKkeP+mB24qbF3Fj0DuIUwV\nhwDEYm8hiH2MnnFQ5UGZ7cvEwLYd4RbjvLSV5+K7WKAkARNS8pYNUI6s7rFb\n3ZLNSd3lp9aT7pyS0INdOOSwgO/5B+NhbLDWjyIfDol6CCchEsC79lqLiwm+\ntm0lregyz+rOI2OOsxBsAEYDYVxb3biIIe/gNJ5LYt21tQzIT6eeKjVEHdyA\nBoJr77Gg+ob5e9Z90YEQSn7230fTUZNXRGFdRvBZBBQyCiwxvM54rxPFRTXM\nuqzQ+VGUQT9kM2qYINWGD77EUpMn5c+G0PiqYA00o/iKM3aQm1pfdldK1Yqj\ngYwDzGIkDboCp3PXNGYWFcye8PVFlK70VdKGptKPQ2L1+4Ya7R6dneJFlrUy\nltS5K6qwpUQXo4Lu0F9blkQY7NMKBVK96luTIz62NdNEGrJDzUVd+LMjV3DM\nECbezFjXr4x8lzszn2Xj5efocrWvfizH2Aw4+856KZ1xLTcYHsBhq0tCULrq\n4gwu\r\n=p9jC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGghG8VqX62g7f/5BS2cKjif764xY/oQLLIDEMdu855ZAiEAxYb/Tv+lbDQ1NeJ6/zz9p7uRFovW5ceZ++LmLuEU12E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.0_1584653304874_0.014309577107606941"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.a88c8e4dc.0","@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/touch-target":"=6.0.0-canary.a88c8e4dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lZ5CSMefK9vlBg7bLxPQC1jTfaB/hn5wN9POcV6gMF+EjjYjr38NYhWGIgZY5MmIImu5Kx10tDW7Ay0/uD0FTw==","shasum":"9abe0d83a26ecdc1cd61961051bcbca70ab2adc2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mPCRA9TVsSAnZWagAAuc8P/jxHTtPtj2HCTevVxvJ+\novjci36i98N5sS51tdblw0idYLdXwyt+l1is8f4AGuGslZfKzCm86TfRaAUk\nLRA8DdwQ2o2RvMycFjTxjOr1U7EvLFBqR0jMa/ynH17GhqYKZXqz7ZPp/i0a\nzyObpV/mtkMABNSIgnbZ15gUVQv1zRmbjOpHm6PG7mQPLxbmw/c0JWCSWDdI\nxZ2Oh6FInrqD6A/WgHO1iti1IbXmXt2a2RUdZ3/ES4cUi59M3z6kQ9zu7oYa\n+ppdDXvj1Q/GJ3xvj4k6iMxOvoK34w7tsIdzmbUfDP5Go05YPV5wlTHEgUPh\nyx7LFZ7Slcgn7WearYYYKOZizHxruURNPhWngthzVV6atepESD9jR2GOSCz8\nXwdrtful43sx2om6fGXwlQgWr1pizS2Raivp5UjdG4IO31yjXh4kOT8kI2bN\noa+hcAdr3SOK+Kczvj5kg/LOsx7R/8s3o/QaW9bRWs1vWThGFL9Cmz3pI1sc\n/10+DfbrBBcdD05RJ7ltF4Lp16woLTJT31D7xUrRoa540SBgT3M2LVNpLl+7\nLkH3tnIQMpIcNv1BtNkLfDgC4xB1ixlwhgQTSr5kpx0FRDinNJQld0g3Nkrl\nie13JR8iSfjDkAItqo/s2Hcl0IWpSFc/rB28owD36Y4r5yq1zG4w5Zh3ca9A\nHstK\r\n=Q+qc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/DklIwgm/L1wKWFeEyOZMEPRGVREeMQtSJOk5Py2BBAiBGfHlakpu5LHJR6yylW8ZQoroarYgVF0kKGBc4TAO2vA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.2c1a4913.0_1584658831454_0.4542965007299997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.cafe18860.0","@material/dom":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/touch-target":"=6.0.0-canary.cafe18860.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vl3KcQ78MEfQXR7ZxaG4J3wPxzqVIKcB0lidqOKZyuYP6SCmmd8fjf8EsxbevvPztjxDVMT3KLSCmcncX/YF3A==","shasum":"35564c2e6e938442992268352ad7c33d303f80ef","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQeRCRA9TVsSAnZWagAAxu8P/jEu4MBy4VeMYRRpdrU5\nUuH6o78h8Aq5123Y0mpa3T6cC/N7KGMV8bGrt8Y4bdi+68rTbF/6rXSLg/JY\nUngwyV/E0dExyVp01C+X6ZYH5/09IhulvVi/cR/64MszA5KE+zaBDRsqsYbe\nPsyZYJecv2VtfVvRBFvlfVxqd7ObkXjvtl7o6auBKqFBhFfoPghndg2JHLHt\nGKXGnEF6+rlaXh5CR1gqIEkwF2O9YetHG4WlUAavcL2cFmYUZlKLTNJIcdlg\n16c0k+D1HoJKPnasJcx3keIhlQ31lFTNLM4ahm5A0T+tH6NiiK5Q/W3C2NbM\nXe94hztd8qqgoK2ky55hHp21vFeVM353rjA5pK0rhU5NnUYIt394u+rM8OIB\nd6aT0L+FoGV+Kni/Fjy7VK/cgmQO6BI9e4NvKzFbw+s+D1PJ5i329iqoDqM+\nf8e1lS8uHNzKqCvXZgP9bfbCRuE08wgQmwiQ5l3xx6lKKzi7ypaapMzkaCL+\nQegBH4zlmcI8HParjuZIbrAVQmC6dRfN8bHeybjAZ40u21iy9Yf5G2dbPVCL\nYSmtTiXsHQCYKsBiIdRdQx0wm0geLq9zt7JvQv6S/Bn9CsifODuyA00ImCuN\nrc+E19qBe4wYojSoDJvD50GW2nUB46bXFsbR5uUrpZWO7o8qNVFVS118CEEF\nDRLB\r\n=Ysxp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm0CnbvD9G//uUSefaAaBGu5G+g4Y0W8vmx+uCduqWbwIgeYUm44iI2WZHlnM+Rqb+klvkjmk4dfek2xAs3AVXz/k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.3a6e481a.0_1584727953408_0.5685060956822965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.35a32aaea.0","@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/touch-target":"=6.0.0-canary.35a32aaea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WLjEwMkQjW21Jq2fgnWM5w6ZwZjmFCjtMcUmuNHdCFWBgKPpHzB+bGzrWgIFYn6OKkLFAkWI02awJMRH5XuomA==","shasum":"5901a8527539b40017502f6c6790babc3f472814","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTceCRA9TVsSAnZWagAAJt0P/1vZj4NrXzbKc7Cqc+ci\nTcHcdT+ym6/7TQ+J+KGyQ2Yt53IoScMVy7MKVp3u5sj3Hy57mXwyfHtQOGGe\nF3/Fys+2pgTAESjTIOJszWAqdiWsRC/OGKM1qFupglniOaC5ao2RePoY+dkm\n8uMpkYkdc6NFg/Kc/HRCDz+cc9xl+Rz3YbNqrXXwB9lrgdPpUNo6AyafszJ6\ngkbKvRO/7HcxFYFeh34YkJ2iBr2t3DUn/U3wgnlMT4VZyYyzXnGWPneik7uc\n2qC1wFmXb5rcV0sJx+rPK5oo+EBVfelDDM9rzSsSop7vSlCNxrRYiEjAYhR5\nqarnuquWrnej8Ftfpx1maTdxmFleZGibwJKdzd/PUwYlmhaI+CFXthPZAOxa\n0R6GzRKshvrCp/JVcrFzRR/SHo60xaDJE8tqKxZIzJehnxp7SKTJBoJYtllV\nej6jvGz5twyBkFtT4/T18Y0KBi7EMQESu1e55w5qKBbCi/XIaAVp2reG1Ovz\np1yOuwRoWODAQ1vdHXcP/9huY8BqtBVMMAWjmjFEHGdtYD2OgCKM6PI2lnbY\nL5BP5PeCk9Vj3XPfSqBaSq9HLTjtNeDwccO+g1oItmwR9ku3paKAvzXXfANJ\nLxHF2j4aJhdfOX5ukfZW9INxXjYRDU/9HEgV2rhzCHf8+zbiLVYoFx/1LpyL\nBxvH\r\n=lPJu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyyuE43lbp+raYzExtotvuzAQ/vy5lCBKo66n2/Q4GjAiEArUmVehCEEk80B7f7shybVEHa5toqk2A/Ibf6r6cSgNw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.603d6eb3.0_1584740126472_0.6472578934866244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.35a32aaea.0","@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/touch-target":"=6.0.0-canary.35a32aaea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-D+JTz0OeRGFuTiWyFJTykHxf2lTn1n3xBARUs96uRTQ7uzCDVFVSHtzeq37IEgdmDdqXrNzdmNCC/cQaT8LHbA==","shasum":"6d2f744b21a2abda8d608bd11951cc4522393aff","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOV0CRA9TVsSAnZWagAAjJQQAJ56Eq1vzByHKAYzR1Iv\nTsTVV5XZP5BbDqDUx8PoXwUkecqb1DfjW61ESvIQ+12a7gGgO2Cn7ri7s0eD\nDKZYDOU+v6U6vf0vHECLgF9Bo2PzRP/h5jj186sCmK9SKDttx0DBnIr8WT4F\n7oKMKKZjR6a7kV0y5SDu2Om7MV99z9HJaf0yHK9co5gO4MUEqyHfSnzNMFQ5\n2UhPoh3XpvMwvthLkxZ/RXW5c7kYzFAUm3EzftXItqxkyNICRYLrsV4Ci7YO\nOUpDPnWuRIgE6J7jjXleXrRdVPg1jb2oRz3YM2WrGRpb7yGUFt0naX2njSPr\n00kW4qGj20fZ5qVc7Z4yKA5dy0veKvwfrjxgmu1C8TFcW5mo9vFlXqkgPgz2\nO8moZBLwO63bxafaa6I08k06jn7bvciR7hW9jv7nviYzt/zF6KdeOcX7qwF3\nT5PDk1rnKWv7XWr0Vf4F+Kt3LerM1bjkTdZu2VPVQDs5mfoGhLLV2iYfG6yP\nWprAA6DpWLW/O8AvWNyTp511PGLAXecuGb/KOK1hTlMzMBFZBMz269mOY1U1\nou77455K+fhgLA7I5Z/2WMbJQA4ikP+YI8/hRiDveUsRiyrv6dLESpGsz1jO\nq99s9/ADc2qTV9silaKdZDVDUxeHFWljbI6VlMXjcI7aePYl5gAv30ZeEWEU\nrdxl\r\n=YemV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6s+ODVrsFrwy02bfgkruXbVyvTk8cZl/oX+/Eb9hmsAiEAy1PnEhYtD1tBLPn7koCkAPHG3fHYcY56I0wsXPbuyYk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.05c6a93c.0_1584981364416_0.6463944936088786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-dialog","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.35a32aaea.0","@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/touch-target":"=6.0.0-canary.35a32aaea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-mIWaBAdHBwa9Fg0R1syfFRNheXcAzu6//ucXjO0RdJaWV44PxFK7BecfX910H479jfIoutbjhzIZ5ph8Ji53cg==","shasum":"5f9baf3cebf84473f698613ab47dbe3355f37702","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.14.1.tgz","fileCount":16,"unpackedSize":114299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiFCRA9TVsSAnZWagAAf2QP/2WBTXSVj2grSi645CbF\nSctZUvEGqyCjHu960c2adBsiOAKSPjfrZ0CRvYuDFgcy3ybdlbv5S5iuy5Sn\nGMfVYJFMn7tMSLgqK+VrmKBrbfVBqTWkBkNZE8btK0BvVHFf5RFfkMNq41o0\ntrD7I3+rvJXs2ujvoQMmKmTls68wd+vQmwyPjX12Bo7YTfBFnITkQIjizGz4\ne/nyKeR433gsU3Hk7jIY9WYf7T6AaWVn1iLSpsONVo2P8SAoqaUoedHU8x7w\nMbYNMoB3+GaTrcFmIfCXejp7h/nCHs3IfL/bmSfsRJnuPp9WOdwVxScMnahW\np0/BRFodaOqUiVPFV1LL3EZQc/w7cDuDaLwc7CGwnqqhV4+1dfTDbzuQi8aW\n9Iy8Y/1jWbmhFmxMsXk/Ugr7NXBEYeGiVlUU/ZyqbrzYLojSOoa+1hyu1GA+\n4xy5jsrDo3Sd5rzED5auZOv8XH36JZENRKocAUvNPZeL5KE7JVftYZFOwXpt\nraBmxELfy8nBmzXdyYaQrBv7gkY97LkV+lgS2hBIOgp3Xx5eNrC4u9bJW2ls\nd2UreLXxkrYOAZ2LmuS01b+I6LitwuciyOvb8Uxm0w9G9ypEKRnMPBENVlGs\nxLHYyYKKlYmjcTBIW5+i9B5CCePFqlAemZ74jHwA8SP2U/BThpvIgFx3x3Zp\no4rh\r\n=Jd+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAh9crhtSUkG1c2vy4LGNn6bvidbB2BLUYRhSvyN06QOAiAzXecnWmqy/p5ns5PEnXN+MYtNHiV1cUM+oQ9rUgtEMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.14.1_1584986244877_0.47627943966195097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.35a32aaea.0","@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/touch-target":"=6.0.0-canary.35a32aaea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JyAb89Cu5PAbfDVsOOQ3MlHFhJ8tb6dbTj4k9JWynZHE01aFod9QTl6Nrm/2Kre6hM6iMfGYlPcq64sshVQCdQ==","shasum":"4ea9d033578ad55bc684d6bf6e82f53039ea8d2c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenRwCRA9TVsSAnZWagAAP/MP/RATQXDKtY1l30aXVucr\nspF5qHnhVd10MvNkyYI+3+3Mj4ZmFEDhFTmsrc2Qg0lYiaepqg3DQJPov0mk\nxDaoL73wyeQLc7m/X3/wqK0IIFf+KuvtccVIU54VuKMrnNivHsiubrC6MXuo\nZIdJxnJwNYv2Hns7zLJ5UVZLTcTL2o7RRU1vt9+mWH5TODwVd5fSDOEq/rBD\nv2iuc3woWmHqmXPR9Kudm28O5Tavncxh3vrtxU2/3c+fwVLCcCkcc5Jijo3h\nuw/cCt47RIaY41l6d6ORpjRnZtCA4d8o18slJpIec9TLHcLoYNDua8hcFz2i\nhhrDUQeujubLaUYZcw6ngz9RNbMYR30gymPi08eWAK9u4xH/gF9DcovwRIcH\nWx3P3o5VIBH0IXq6X+cr3Dw+DX+5MimYN6v8V7Snfy8iApK/6rFkPyS6PCqL\nJ4aNCxiI/24YBspfTnTUun2QG7mLE0H6aTSrArj2FgGpe1fbRV2P93r9mZVq\n0GpYRM1IIREU1vEnEUjkkqsCprhV8hqPHclQItckilD0EVN3SZ/vAeEf8gln\nKyQ5jrfJ6qagHATlP75BDxRnHP8sJgJSor5tDdZfmoVhI7Ub8JbbByi/hLoM\nBcohx04cQ7CcrPw0TLeGwzXPe8yfLPQXGeaX8tJXD8aAmSYUFAu9QSmBUZM4\nL9vB\r\n=SwCO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8JnYBG9K0/IM8f1YYn7YBkwjtdYSDzfd5qxIjvtCihQIgNKEbhBQuASwuT0ZBvsrJeb2qvkYNmxVaRwsGJ8Z7s8I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.4e6be3f4.0_1585083504221_0.355296209650529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.8707953b6.0","@material/dom":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/touch-target":"=6.0.0-canary.8707953b6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Fk7Em7dxZddTmjKysD9q7Fk2Db4VWbY7CM9vkXdsyXGr/ftYOjTNmCfUKxZ9cGhxw6K69WHQ6ilzbVEacHJ8WA==","shasum":"35e230c9a113e080680db29e86f08aaa333919f9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenidCRA9TVsSAnZWagAAcLYQAIrWvkphQVV+mZ7A1048\nPsEWagTpC5jzJWse2k3UZaBKG9h6askdJrNFZj6rj70L881Xe/ieFx2RQ2Op\nGw72YHO0iK13CcjrvusggB60ARKwLpBrsi/QJxxreBcC0wTNnILf75IvXoZt\nTUeIc4KSoGqhlO9yqxpMe3MTlKAwnCkS65mZciqvHlzuOpkBROwHZeTzjo/X\ns993p1fKC81h1RvGCirHGgjDlcULPkigWiIIHzndDfwmJGtIjYDdpzuPQp5N\nmitZMPYe1y/khbVDj32XjLJMN29EBapW3gsIzARF+QE1vQ2Yfsq1nZ7jTkF1\nrWcs3WKXH7SZg1eSbQZ8t/XaUIQ8sw3mIC4rY6H+HMkX/kfZ9/dK6OGiVBQo\nM1kECnU5MuAOTr5ufxYqIVhGqQUKb/B0pmC8+jeLpjcVPQIzQnNfqca72nRJ\nfjcKczEHOHu4Kj1fA3xrNyPgtQgCI5oA868kf3YNYhmYXuUbVYgjMr80ByVr\n2D/jr+PoAKr0EsUMIWGFymLlkYUCQkVYZR26Nd6xrF5uVlUANjcWDRixNQg+\ni788EcT/q8BbL1fOkeijOBHfFmUHeF6gyntA5O7f7MKDsBqI15JkbHstu2V7\nEBq1RNc7GxSOqE1+uSzszLpLSRHkkRsoXtyYxKTayUmsnIots5Gn5AKv+Zs+\nEo9C\r\n=EHms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNEcwYI/Yc5CXZmub9Bcfm173c4866QM8UVISbTnpj7QIgcQ6OLsEsqcD9Mgdwcvs+8OXYioIJlABSJpJluXfoDPk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.c29a683d.0_1585084573109_0.6019346244670589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.8707953b6.0","@material/dom":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/touch-target":"=6.0.0-canary.8707953b6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UZmsaFacP7HQfxWxUmKmmr0oMiY6O4GUr46n06NWxcn7SuGjodlebnjGWWA6K35XOE5G9ziLS+L9+WrQtxFI+Q==","shasum":"a7ebcb6b7270e9812bb778a4e2f1c8e70f17833e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepr1CRA9TVsSAnZWagAAZEcP/35ly7iteHdx/16JTQs+\neIEfAXltDOS7gyH6y5paaXF5+HTP9PnFG6zwGcCfGJtaBdBByWcHrN078jT2\nlPG8An+NJO9eIkf1uHY3cHj9IHInrinXTWUllPaAEkcWoF6iDad9Nynom+vl\nITecjBHmurcdf4PDmIYUSypnUUzZnLRSPSG5EFVbXHOcN1WlVK6xOFYssiw4\nZFA1EJvToEi252C7J60VL6C7XGMZowK2Qm4eyAgB80XG6j3NpMTAuao3cthu\n1jkWZVdXc325mHw8Wd/T7moVM0ZZDjLAmpKOA9CkO9dSLIvFp+gh83YuUuXR\no1m139Css2o/YUz3x5DpBr7SDrJT0jt2Sftac057+7Z/Qd2Z06wY2mLu3sHH\nnhY6LJmovobJZBpzZmkGINTTzEWAFo9MpbGDOCfIupDlcdX3f2D4l2ZGBbNO\nc8KFiaE0sx/aeKf3PZLaUme/mmXchMlFIESpqiZb0M2WJ0xw/4i8J/An4nZX\nxYtt5FNxFRZmc/bUoCYExA8ns55UmUauDV2jU8ECsU34efWVaeQJ230DENv3\nA4TvcahXNQPssAp2tlFY2z9Prpxyose3GcD1lSQ8ZR02Xs0CXQwKFXveKnFJ\nJyaI+Or0pFnivQgLGZDsKz9cLuRv9F+8GQlJ2VOwTytTUC3NK+L/QvGzioXr\nr+ua\r\n=PvFf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6pCHoht8ibkP8VLZ45g4KCB5MfwiEP7PJIKl1ysLvFAIge8885oIlCwM7cAEEADEfhhGaFwBE4ccmyfoeUJ+bHho="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.fca3dd9d.0_1585093365103_0.07959709918170765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.10af6cf39.0","@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/touch-target":"=6.0.0-canary.10af6cf39.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-U+dgfTu6EYxQNwybjgv4z4SlMozGhG/WLZQWDp7TWCTgOslEnIZihyC3mz4E3s84jHC67n7d1I80WWHKjyMBVg==","shasum":"406f705df13a8f130d4dd867c6fb2dc56caac0b0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee808CRA9TVsSAnZWagAAGVQP/jmALZ9dBcYZByP7Gpi5\nxyNWFZ/jO6J1ghW1/Q7sRO9KVuGuKWKu7n1x0iiHovJ1V6MaNqrA+T/5Y60d\nbxBN08WH08G3SmjZFjPYAhmAlZ1cAhvbgSgM+tanWV1mjDjf7Ba39Kxy2aZK\n8PyZ+nZHzCzSt3S2IUpBlvHdmkr/657rRuiQETwwXKgBXkAMOINFXAnDOI1i\n6KPO3GEkxnJXMCwL1JsJLy1NrkmRLnFkvWAdj1CaOYjX6SSYYfZDw3YtlsV0\n7uo7JXYkWmNTKUDRGyclppk4q7ECnlvaet99RWVgJtadY5lFHA8az2CO4A3m\n7asSUpzS4ra7zhkm/a+IFqc2wpc1ZM+6nJFOJORukdOO15IZAbvMLjT0lIL6\nZkTrntCCnueqJSRjzem/z2Tx+E1hIK19OZZfLFyaFpV9MqX0TTXEcN0SWfmj\nADuUwhS/B2yO8cAZ6zUv/JMCBQ2aZB8Y+ZTg/5JgAaIGi6u+vsjSj6hJyS/k\n9WOFxSf5BZNnBI8CWNqjBEdIOgDS5YSBYLT9uLJuNvjpJN2qGXNheKxZUV4J\nZ5DPukw/tnkjtW8r9XiynT/5+VX5HAewyt56GPf9wRuXzAuYiIWE4Lh2KLym\nnOjr7oELfFrf9Th+RmGlFEFG6colPBAky91uBKsTt5tl2HkgaVsnuqA9O1rq\nswVD\r\n=PdE2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8pL1zPCvUgZ8hXjke4JjPO1PAnt1KrVbPXjVo9U8mwwIhAM7NI7JDZWhf0yQOWtsvH4rNqNYTNlDr+IqcKwwaWepo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.1e73da49.0_1585171772161_0.8666902910850736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.10af6cf39.0","@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/touch-target":"=6.0.0-canary.10af6cf39.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GFVSk/btEBKvQ5QiqloAH01iLxAs1jZgZDAhQcA4Cq5CjpW258VJDeNYYEwgHldF0KjTH3kHlbTUjuor3QCEdQ==","shasum":"119eaaa34c67b4a59d67dc59454150ee589b5279","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVfCRA9TVsSAnZWagAAfYAP/3UKo3BhKTQrm61XGROV\nim3Ulz7FXsjjY7ywJnPVRyYTftReYmTwUb+kVJDnGxXQ/J6OWFWpmM2+GYWV\nz+PFFPl5hDiDMyuDcCWUh+NVaNGm5KREbjlT7yxjN1lM6CaEZk8unoI5WM/A\nhteep7PzOswt73YSOCii9DTKMX9a3/d6svDfmAlJ8qF0v4Y+wpBKdoQwbIpS\nmX5LJ+woLl/UDGaIWCaOLvd4TP9SKR3zfvgQmDJ0ZQq7tlRY66spkN7Cyeri\nTdRE5FbEQOJtxWW3PRbrFLSJ57/aItB+eG7kBhL+O5BfjQBeN7NyESprgBbc\nLiPTKijOnLhV9Qsp/81P78YcWWhnFl8BauoVVtICkJv4O39SqwWxVMeuCTRT\n+DH2/U2u5ipV2zTiJv/kV8BxwXUGbIuNTe3s+9F6yd6qAnvKacLim9dL3UUz\nF61UT6PFWkD4E9KQJP/70zBtyPjzsMmQ72Vw72F0K/5OhBMvrtioSlDri6JF\nQRDZBsCOvfHMrWDSJ9S562t+t69tT9FbrOHvIJaOm86eJc7pxlMr7/8BlssD\n0peDXuY6zH0F8cUDgly940QC/UqmFVYjohmvhYtL3IUv+XF7mFklrNVek2nP\n7qTHXyNeRObIa7dXr/V3Tjm6j8j8iU98Ym9S35O4Nx6G8x0bSFX1qwYbB50j\n1Y39\r\n=3Uh6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQMWr5xMR83elo86ISMeRfia8za5LNk+yuKWAanKSU8QIgTTkOxCiPX2VGsBtpaMDrD/hbrUYlyVOesNtRxWyFP8o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.bb6dfc5a.0_1585272159023_0.668064510406619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.10af6cf39.0","@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/touch-target":"=6.0.0-canary.10af6cf39.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uIWgL6pbCP2R6etsVQSQQ/+6ZcgGvr+uUrxMAlBiz41uCcRzqWUwfBE3fN96nMtJ2qS0lweX4BTbxk9E45pIuA==","shasum":"94f208cbe05ecb24fc10c86fa9c73ecd18b767cb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloUCRA9TVsSAnZWagAAGYAP/RtPONm53o5L2izwDg4J\n9u62cwNlAU+OMNlcSD3h6VAGiyQV0UfZvmVq+Z6CtHqGDpZLOVIPO1CP62Iz\nN9Z7dbH8BybTuoP5ZxCX/1W2/NpsI3MU/Ze0NYDcddElUUgIKimGdFAq0vBy\noRcN9LKZNzcjyk40u8nDZarJ3x9awG4u7FgFDOo2jwjG7LTn0otdKxVa9Xrs\neKDBc5aKRiPOKWlXWcMDodZlE5uIzz6o7I1nMeefvHxPInVhtxH8K1gro4nm\nsk8GozNiVpOyD68JWtksVy21XcHeCBsLmQj573rxzHuBIFkLfuv8lmh2jOFz\n5PvZUsaEOWT3sPDAeuhv+x3l39FkKHIhWe9QwAfchmCUBJ5s5iaTVXHdRC5B\noHuooxDib+OF8hDewilXXZmfGGjP9YecV/YIGo9yI5Bq65XaLhy1JlRqMgyK\nG+d7Xp3CQkgbVfQTd/O6sLxBqlcDLOqrMq13trLksSB8u3MNAF+TdH0ZqjxU\nWJf6SX6ICLxBN7GCjLd88TpxvgwpDWpIdfAQLq7ycE4yHS/1jp1S2LwO7B/k\nQENJWmkabZxuFkKz8WVRHEn123bNNgL+bpDX/RlWQneaWKabcmu67/+j/7Fg\nRianyaFICW/vusadqwU1H5gVUBjxzI+goiIFA1Rg8h+gUFZ4jOK6kQYT1ayf\nUcdH\r\n=94tU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkeH2720rEqTxK5Hy6IPmyJsLKmsjPmdIZeCeEcPXOaAIhAMvfQZ+vnMsNfboXa3e+wvouWHHMrH0/XbJmwDtzvObx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.1884603d.0_1585338900191_0.012688991470960698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.d6315efe2.0","@material/dom":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/touch-target":"=6.0.0-canary.d6315efe2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XjzWSnI7WCH7BLsMExA1hMAABtm48zW99Deq1JvYFYUK5X+B2tCkPrX2ax+gRVupUFQpWwiTqb3xFsK2jS8sOA==","shasum":"cd08fe2d68d05049220628c6c091ffadae67484d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyVCRA9TVsSAnZWagAA3VkP/REaPa00n0NQMRXsFPTD\neOew3wDopcSDBfXHy0Q5UQ/GbxDAume0dhJXZWI5axB9khGkzwf+RMAcdI52\nmiG6gH8yx7qAHOd6vv5hqIhjtrnuVgNcEEdZxIrivvrFHe2wRBWHFCtWOKX5\nE3lsDa9OEEpH+RZ9DNBoWVplO4Zvj404AadIqRq0rwRFaVZiGlO0f1T5Rz2R\npWUzKRGy9SHbHbr532cf3JYxZYVuSUm0tbZgy5sojgfImec1YIWIhPMm8FRT\nDqQTxEe2c0Mi2iUBcuzYq4IF+s8VbpXFQaaeB+qxuF8Ba0itDNWLPPMceh/l\nRCKwXscfLgwjEr5r+vFs9x+y6vS0EtalWi9qa5nFp4zTtv2DHOL6LlApZp5O\nQ7+2MAfsZAkTbF/V+cF9X/6roKP4fDQs+CbJQUjulEWBQDU3ZgzXMaxzaGRb\nu4G/iK7doSOZe3Db3u4jp7sYQCXza9Y4oMcM720A/WBFOXuzRqLV9GIphNSn\nmTvCSgPxaCkSSax9YKvPq5d2VQUGGcH5YAVCMr5DnCwzGvrC2vhuG2LHtHdK\nFgLHfqJ+nFH2R13kMvRDpXUp7ORpcwi0p2BNkNnqvcPbvFyhgM5UKqJI6teX\nVbf9ncVjX6zmrn34iAm+7cztIGLcCglF2nW1wYcREj2mv1M2Bsbo3D5JSRru\nldpZ\r\n=iV0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy/6L1OgsGEq1sKj6HJ1DFInmocmpGdnrQ1oy17ZM6+gIhAN5eQwM9EdEz3IJ9OJocduH2vh55JzvKn3RG5VIGGWpy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.aff73cab.0_1585343637101_0.30973086320319676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.a3016368d.0","@material/dom":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/touch-target":"=6.0.0-canary.a3016368d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Rsosq0LNdAudOos0ufuczbDEv7D4fpvS+BiKLPTIdatlrYFFY1cZzxX+XIoJtoB6YMcDUIVlYClq/pdcgKVgPg==","shasum":"0f4e2ee177ae70fcec942b21225df76e33dd88fe","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4fxCRA9TVsSAnZWagAAvwwP/3vLbwTVs7wMpzGGMvE0\nt/cDltvElJJ0C+ssj1TvTpFH3sejLvxKM427wD87i8C8pDUX3VXP54EEFFPL\nM8ETYi9JmkIsJSeSKHtNrGD5aO29ZZE4Vtlv8B08VGiM2AQktcz7nc/555Ve\nm/uhbLaJPmOfCbBavmE+nYggD6wfYZjDXpNI6QhJI+SzILeQfmvkhMsl0P3x\nt5V0wRCbGel4zd/MkcdXCcr9s4XoVoAiN+E+E9fKOGIED/W5MfH4aw06c947\nV9UiuK9uaapYhpMNT5To2VuwiGyFak0WLCxzIdfiUbcIadbm6a5nnLRd28TV\nV4i4uSssjGHcDyk/prHMQyvYS1Wzp4xyeQYR+yuk96GmU14bzi7YSYT5SKgJ\nJYPbx1lLOVqF24s/Nc4xQ2ICZrN1iKQqGZI5eKyhTxpC2u7HVqHRbdPhyjMd\nGwFMTT37krjFS0ZX61Bi/j2Vqki2a/GQk645leyu+5vzIi2MIp+cuMtpw32R\n6KVQ3CibMl9eo5KAQb35MfTYVDElRDWxXsyJO85Z+BIg3fLbHdeLHCck/wGR\nriWvKTrF9oBxbu8x55NbLHolIzL1fBFGKGbhAG6XeoKMyEGbyvCg98hyX6xA\ndQMSPSsKdksYnFaHAosI5HZysjjqk3gbWMZfUHO8oxYZdMcUH7jZcLUeQXbX\nh+e6\r\n=m4Zt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHfcesFyZ/4Qp1LWLEeJoVFQLw2KbitFaHbD1pMYdHLgIhAKx7Iej7h+VrPu5LQY5KH2O/AF4sNq8y8P6j5H8r+pz5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.63168f61.0_1585678320333_0.39319610094325586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.4b45b6620.0","@material/dom":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/touch-target":"=6.0.0-canary.4b45b6620.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZwYjpSse8q8QC4Mdy69xoZfxeoOzk1E5MQu5XJfZiOJMSdgcMcMeQ7lQpRrvEER+KFN1vcIgD1rGVN8xnQWJnw==","shasum":"0e8a27ab715cbc8ba1e84604a01e75a328a650f0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7P0CRA9TVsSAnZWagAAwtgP/jzyAlanY4yvOltVLniw\nfSFUpll899ZF+umBbinvsgjS47axBDhEmG7KAaDi+aGzr/N9WoRk4NKJZJGe\nrBDq/1mqSAMR9AeGBlP540GHH4PdNotw3JBz66IiZt2B0aeCp0KCIsQ9nUtA\nRNvmwDxvE24HnLESAwOJ3wU21PH2LgXCEk4yPJ4O7Xs25L9/AMGJi7u9BFyh\nMek3eRqnwBiFcXxrqGTk4usWZ4pnN094lc4V29L4F5Tg2eWctzrEBaVS4Kdp\n6mlyctfkNFdUD/kVr3DUC3/5lpSPcWkNiF3feIkvRvvlAZ/BfOn8l5xGurmW\nCTMuLcp+CM67J25RtthOAkrGj7uApseS4duHY1sb4kIR2ZGG7EgIVgXoJC/v\nf7EeEPF16tIiFO/C9DWW2vUx2FLfGMKM9jgKl9PLZ15MIRGMq3CdHwydF+19\nAg2hnez3BrOeoiN9pIoQfW6M1DE6+xIuC6BMnKjhNv3DUiS8x/aUFJluZ+5Z\nqt758F4iIwYrPj0R1toPjz1Z4JiSsBISfOlijMsxC2A9v8NrZ4LyIcvmkRzP\nDiKYqIKTPrslCI+TYVx6BG776OZA7qkZOaty+n3zzI9OBGv+9MIZ7DbbPNfK\ncrI0a98ytRAHqc665cnBBh4kBB5+JRjIm79OUlNJZmm0V59jeepDLjdq7mUG\niMw0\r\n=IUt9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh8IttgagLfcsrgpDuiAzsomRSeIrJ7cbvSnzjBWhGUwIgUwqBPH7WqW3P8HXq0kNUec0fShx6bUrzv/kIYLTbkBw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9fb79b3e.0_1585689588482_0.5626198838398437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.4b45b6620.0","@material/dom":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/touch-target":"=6.0.0-canary.4b45b6620.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4pX44rXsGoeOrIyLskUOgXZ319yggV/NbBeEgeYR9txu4da+lqE/u/EsctF0Ae0r/zdh8a6IiNjgt8FiMK4TSg==","shasum":"4fdc174e1654ea60b087b192743bef1963bb7044","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90MCRA9TVsSAnZWagAABhwP/1BQHRmlXJdPOrOmMHz5\nWpd2L+7gFVG1Oz7CaeMfGeVWvsVWVo7rkWyzbVb3xqr2zYg1sN+c58tGniLR\n7oHZl8dyvST1WMzmPJ/d4d4OLTPoKCB+XR+Msc5rj1UAhLULTTLucMklVMw4\ng1CX6uNRPirJ1ChJQGtkJH6IlZysnKJvnhZb17bydAZjv2Zk1MOmJFUTxxrc\nST2OEExHe7U23pVBg2EbW73SHdcUxqWt1w1zxtalzxgT2+QhTYcWTKuIOaRv\nD4ywzpYHlKDMbsTENYsggPjTO+nnUCaeimB2Hjfubvr/26O4Vk5EdRU96rRl\n4/Wt7iq7MG/kteq73gBBVOREbK1YXFSnpoxQs3Hikc0Vg4Tr8yqvru4CPMd1\nUt75cekCx2/2e+Yi1Nw3vCOGY5CX/8YLM6nsFdJ6EbR2Xc7cQVLR31/A+llU\nFJOgxzZ/dLXTIN+JMybALgla70dFM8QnkWcBAgqtSB2oXCJqxFOb1ewYbxH/\n2P1xiDuqFVLgkR/osg8mBcCkfJg3Hvfw00OgQeK0U5TOlo61fYWmrtSFqtyj\nhXstVaIwxNKrgBNKdFLmmh1HyR0UDtcxgRNr3Qvmd/yGgROkiPigH+UReiV1\nTEZ3DH77tm96iFrW7z/yEqjIeb66rfuKh1hRrDAIgr2pcwDgGTSukFzM632x\nZJTY\r\n=qfJM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS1Vf3c4UcqdJnaT+GmErguapBINTiRbz3bcioGjYEbgIhAK/5QBb+MlVdkhuyjgEHojPQ4dG6WPH3RCUsiZdbUou6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9bd3e9e2.0_1585700107642_0.9171421629800673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.e84b9c8.0","@material/dom":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/touch-target":"=6.0.0-canary.e84b9c8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GXqm36JLywDwZ9R1X37s7Zy2BwYBRYe4Jcxp8N20kLOM8rtMl2TFgScvg1Ib9R4aLjA8/KpziiW9dvLspgSQtg==","shasum":"5d201e98b949dca26a0ce31f3a2e347fe71c2606","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":114328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/TCRA9TVsSAnZWagAAqC4P/iK6cH25Tc74/CQqlRss\nX86etWugBG0VCikD8kpklLrzhKHVr+eHgjo0/lCSQONuFKaGXXBujHpiJom0\nVZI0sL09YUZ43SMCYuC97gE3giAELmFcb8LG6vq10JbrEaFwU7Rnupcon3Ck\nH+IdboEzLUVXPDkmIFxzqaVOs40DXektWQmGfSOSMys/R5Dgl2rPQ2Zf3uyT\nmDvrCvSI5AERketDC08TW+aNpN716vZHUyGItSmP03fWGNtQJOlR3SVwxZGB\nuaPQ0jiYtQcoybnsNL/8JSCD5YjNEcknXxWghxt7IBLHJmgjtedSv8/ZXoyb\nbhkUZeBV7WH/gUPKLJ64F6e9wq4dXFb+URl4jJ8v6QiDWo/+iRWLj7uzwxes\nE+ePPN2Jt2JoxpdWjGkxVeKshghKgr52QYW/gcRGTkExDERMxt0+dUZif4QO\n+bIr4DZavq8XcMX+1fOqJo6xku5QIZI5+nSwlNBKtyUn1xKSNqRoH4kkxM2n\nMMemqlUfcOkskpGK2WegwQgABARQMHX4NLhdbgW8wnKi8/iHUkTd2fgCzAMI\nESBSSufXsh+46SO08UzgqUlSq5AC49yP2Az+mc83+snkf3HErDqrW8Q/7oP6\nmVz2mbC2nXpSEcXlBhm9y0yYVVh0OPtWtlMXksDJJ37huyzGx5zKtsjlBq/Q\nWCzC\r\n=Ccdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+X4l7VQfJ0FSj5snWprxxs8jzaoweCIxXHXsW76KvUQIget693g03mtdCGQUPv3NfCxC1Z8LgJeN0b9jtVleneAk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.072084ab.0_1585766355315_0.054708155731870045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.f1f8e60.0","@material/dom":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/touch-target":"=6.0.0-canary.f1f8e60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dUX2kbmha1LeMCMKv8bsENxaric6Tne3TQqMWVGjqkyQTB4bjxPkc6oENyCc1QLgfd7xs0Ct/1Ewtc+l0sWKSg==","shasum":"b9c479b8ebe8a5c17af746bf6f21fa4fb187a022","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":114328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ycCRA9TVsSAnZWagAA9ioP/3OOonrKvCJobR+YAreN\n4SXYHoO6rvxvS+Y8l9MmCvnigTF7K+IwOjExQZDZMb/TY7s3oQVAjNh1wDrJ\nqwFuKbzX+ws7YzJi0jQ8EtbPXn6iC4G6UkdWSfxnh436WGA6pR53Jejc0r+B\nNrSJCoQE8gNEEeeAEX0HmFQncGHtMzzvKLYxKNml0wb9vAMF9n7sYb1eIfep\nnS/MYbsnzO3Nxo4BF17BcOuRFFgkLFEsKis9wwhx6nBacA2g96lheem229Re\ndVf/w7+vSB5UmMrbeBSJxbMFlpSM2kTP8WqhfGzAgimTJ0kbJyfCBj6pwHQx\nK3lwrUwjX3EcTSX4D8gjyuSxMzLvrXYgQiXw3K+X+CA4u608TaT2UtMsLPfi\nCjtRQoLBqxzRvJIQOOwKa6pGN98zAlXNPfjbt5eYa0zzc2Ti6zkMcqAHw5Pv\nFcxUddUzVnt0IMqlLL4hbtd1HUJBHBaErlx4CifMoB653qSdW1zZzVgtNjYl\n0BNmLTxO2Au1HZYAr54odqYam3pcXdMOPK3osMRHM805wm4wqLDN5VB8zqr8\n+8oyAavv6jgFBu0JK4DEqyxMJ345JpJAGDbaB3wt3WhIRYvE6a0PE1t3By71\n6asiZsN9KDsTIn9cRBTHQGjzCWydUh6xggRSpzRL65Gg+UVUrOWdjACHqOCm\nMv4C\r\n=JwJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHs3XPmB0G6y+Ho1LEFF4n8WzTZiiDDDeZ2E6VOKe/uOAiBfaNXKH1R45p2dDSf1BLr7xR43Pt0IrTlBGvnyFu3LgQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.4dec04af.0_1585945755893_0.32367903701531864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.e84b9c8.0","@material/dom":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/touch-target":"=6.0.0-canary.e84b9c8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LiwLKRw2YiFlRFdSHIy6YeXz0Tt/bDne2jI8Q42T6jzmijfsNKLqYPY2DEvr80a3kk5c/qTRczzb1bI681wSZg==","shasum":"0fccab5f0dc3c1c95c1aba4573addcd4656348f5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":114328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ysCRA9TVsSAnZWagAAAA4P/2rOqaOixqGFQfJ2n5c4\ngUYm/APaksM/ByfJX9CeWqzngpOpBPdtw7VxgJqK0e22e9XX29w2PKMb1lN4\nZBi1srxFj9VGYdEkyfzrFrpxZT0T4eafVCnu9DKvvZCRggx//VqzZqbCG3M0\nnsyR+Z/pS4uCccsQgjLmbiKfiRuDRoXAlvZhPVGnVU8VCUeKbZyc0jzzk8dH\nr9QYDA/YBbNC8QO0s4YheAhJfyhxJIgnlmjJ3RSsobcSRiybF2DFjlHdgBr9\nA1vIG4O9avq2E9GdwbdQxYhZVFE6TBT8IWD7rMF3B3hz9HVmemaFZZQB+Rzo\nei8gL+HPBd5Jf3ZSd9UTYZ1FWjUSAaPWF8IJqt2Tru0xOqygdbf8QDe4yPVc\n3mTyq9BG+vCtEDfVKtfW//xKcxqFy2zsXO355/TInZcgkqEnynG2AtApi8GC\nLO0DwmnKNRK1BYlDfgswoW8ZuPpggEZ7wdTWKJ4OrWHccfpY4Gsq4DCDxNIC\nVwuyaOr1UlmnrzTVVLeo+8qX9P1hv6X3chkoydptQNWeYxGTSAdW4f8txvPj\nZt7vucDKtvxoOtLja7dyOPKLPbSp6ojK09gtXkb9puZQK1YIcy9I+yH+iNXU\nGcBBiv4sDM01O23xod0jTOtR+je40FBFzTXoYIhtnW07DUuK8HGsHI5y1oGW\nTDGy\r\n=2Zjw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGI72ERGrjDb0PxIxXHQWtGnhG+3hiK72vBBpI0/5CUwAiADK/6naJm7a1vOrS8K4RPDHQYgpGqbhmDq3xJHvWk8Ww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9b676354.0_1585945772236_0.3272938771060756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.f1f8e60.0","@material/dom":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/touch-target":"=6.0.0-canary.f1f8e60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wiQQRJh0CHut08+tpchlEdPhXYKoEOFQFSZOe/tWqq0NhlXfdocTjarHIUnpfFLWI3AIkLZBnBIKewOVnJKZ0Q==","shasum":"5c73adf26347961439efea006c7caba2153912e7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":114328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6lfCRA9TVsSAnZWagAAQLQP+QHNqalGSD9FF3JKH3eV\n+jbf8HuoOxuLZXPNKjdBg0djd1WrukKCjNzvG8XGDCG/bmIfqPHQwQuceU0I\nOv6OIDNrgIOSzHDr4TE3o2zBFN91MAMPRldA3qfjmHMDd0FnThIELNR+s5xU\n4pvbmT4XsA3alEkczSziHsEHaKkpsQ2KsjTEkf8SuG9EFPKbiAx3sJVeHKa4\nLwhhBp034ZqyKh9fF2ZvgXQ9oDYBz7Y+OVbR1im1DZwIN1hk0QIMVFGRvA/d\nd/+VrL+XyRCYcaeOa2bxuG2TM0Cw6oan1ir6ySF6mwt/6J2k/YjeegE89H+n\n+zm/0XsXMy7BmSitLZDHLq3s6A1LYX3whG2+7I7Xsbae6jERqmSlUUDFstuO\nEhyWpsPpFWfqb5mDTG9AIN77sCV3X4YxElH66GvEKmENWetxJL7CKjtetvD+\nZTsxcBS8l/vRIeyGlKizfqXyNf0yESm4xP6AtMaeqoRLZxWguFQe+g0AZ4nu\n97+9LPEUij4EkSbhCF8s9fShHMKAd7Tqsc/u/s7OTeFGPHTHrYwUp8T7jeC4\nNlCB+CakIa8UpkMpmhM9veQRbzw/SmMp4rEoblpnn5HsKbgjHYfMCdKpFvMC\nboz09RDfMS2CZoxJxNoGZJDo0SP3cFL1Yx8FtSr0wyyvHebkzpExj5uJV5I1\n14OM\r\n=782w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnJejhg96Kghfw8DYseSOY6QGV/0TbcOHFfz3gwRke5wIhAJQbzCoYe91aWQ94fL5M0s3IJMeEdCvwD9LX/7qvX2N3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.6b946095.0_1585949023371_0.5890173548216457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6a40ef217.0","@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/touch-target":"=6.0.0-canary.6a40ef217.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sIWe1x6v8v+nyrBFR11Z8+ChVYRmGZcrXBVxz6qt+CyiwUY/tnTZTHtR/yLLZ4s2+hp8al4WCa7o8+fCFmaWrQ==","shasum":"c2b154887a01298d63e7c05f434970462a7a9544","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6qnCRA9TVsSAnZWagAAjXoP+wbJ9RwgCxsdZV+3rIGd\njv94KTOLmJYfliyVrocTXMjbFjdb8TzNzvs3JR+Uz8SvKsOmqOTdHkQO88tP\nFBtilHYm9ccDVzIFZmounZXMm6u/TBvG7yATOsLk6wqib1zOMhXZ8svBf4wD\nNklUWcbSYnom8GZESPevBnVS0q/oJnIMVJ9NFrg0jOW8dbp14Qs6OFm1fBZj\n0qsptv70uhelw+xN/usIZ4xRWGGPfq+yNJTpri2Sj+fSIoW7Wn2kIViLPWRT\nbnlqYXQ/4M+w6XYBXxjoLhZzbXXxY9bT9T6AvZ2AYQySpKEkRuPPcfmG9oIO\nRQZAlBnSTFZAgMfwO2qYnuTKiG/E2vUyxZAzRZYYpCPVxEOy5Fq7DGWXx5sX\nY9NLqcSj464zcNTsZLcoeNFul3BY832KapI14Tdk2du0Bi8sfmvtpebnCfbQ\nWvpub5D9pwoAplxXdOH82wt0/z4J6n6psGfVcCtADpgi+5BcAKPsj/pqyDA1\nuJ7/wpWx13cWpbHDnLxQuJ8Un9u4i2LwDk4/CV9E0bwxH84R0fhCaAVN0k6w\nM3Y3ydlVfYQpfu0jDCrG27flO21rBSj1aI7YgTJcTZDUFAwIPZa6Oetolxal\nIfB99mLF9bwrm39bxDonktDr5svTrdbJnCiwTxqGybJ2txgUnGzJ9IXAQR8E\nZAiq\r\n=OHr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDul8r0bAxvwoKQ/pFS9vcgAwf+IuftMEwQKzsuPUYhHAiAcxxBCvyLwmnsm21F9iF9UabMRj1IERSMGggkzUH7Odg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.5ccbfaa2.0_1585949351307_0.3414961069389022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6a40ef217.0","@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/touch-target":"=6.0.0-canary.6a40ef217.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CU5JWlRvGH4FWsa5gJKs0D3DxUDcBFY/+pf1x7c3Z0Civ0hfbSt3SK9PC+vHDWnr688JmFdOR7DUBOZFTwbEYA==","shasum":"a05c8146deec811e83ed5dfaaa47bd2b5ca9895d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN26CRA9TVsSAnZWagAAWXAP/R+/ybioHpFZZlWJol8m\n1arSooZQg/F2ccSqWKXkBIQU0GN0HtjAm1XsrYjPnkLi8Gs8lNqqXaVtjrl/\n3zteA6IcTzdtVuqy8yzodfo95Ft8yOFqs8EXD3Y47CeJ0ZQxeDs1X+sTuDsO\nrat+lCmhF/i45MVIuKcZE6TX5J9BhrkxQ2QsKcmqCZ3brhwarG9R1Awxuj/g\nHdLvZ0QUSu4Kkg8HPjOFvsrI5dCR1AVYjUqXT5qEpEXUPh7qAI3MGSUyG1/5\nvXbdJAEK4Hry+KjhNm4ua02jmjrAoiK9UF0SC6S6EQG3SxSHWS5M5u5pxkzq\nGiqEvW9a/JptIs8qgGDrgiHnQxyMVZdUH6mRSCwQJfUR4gmoHniGF/ef+cFZ\n/ufPjk6XDQbyJ3LHCHi8RwCIKnFaYBXg/6idnzIa1cFC1Xjwg3wSP1B3L3Kb\nSqSAdi04oVmesZXYvYPsNrSpiGTIyMlDPRGOjXbJI8grhD+k1lOplC7mCJEH\n0o3d7VBxSYewqu588eRJ1nehFy2Cdm3/+hI/RAH8AefXx3fcZELKS6tA7gEl\n85wYwFdKqN7wl7Uyfu1QEmG57NZA/25NU3zuFtCvuh1HUfLSMAzLB/lqiv4S\nSZIRkDTIxTWpFAk065AVPYHd2uPqP5eabXnCuep9F36oGIJQGv6G0yMehVx5\n/CrX\r\n=Ey+T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3118E/5ZWkUHVS40g9p3xn2YQCtLPCoSIx1zar44dQQIgUPiLGSq0qkJDd3G6QcdOkZ4nre8NV9OOh3YSBhAWIF8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.a0ab8772.0_1586290105708_0.4404621984887276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6a40ef217.0","@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/touch-target":"=6.0.0-canary.6a40ef217.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8EPCigPYGq9VmP3WokOzRwO9Oy+mORfTEjvsH+oRIRqW7JpsSMxETOKeH99ECJPeoMvwSABo/f3cjX1mmGxk9w==","shasum":"4ba39cc1818b60921d7577d40db0a15b11de4b6a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOFCRA9TVsSAnZWagAA2QkP/3TF0Z+x7Sx62CEddyGx\n1+XYQeREUFS2QtgYzt0h3ATiUp98vCSpDsMkGOv/rm8tG1VVCZ2N5ON/1QRl\nt7KgsKvzqNWy1vBRWQS/ohNtHX3kYx/tNER86CT7oehavQVw2OeDCRfEMCuE\nmqVjFPYtTOS0ykHBN+qBz1GEA+sY+A0PgN1jMRxX5ujJFS/taxB4txxY5vZ5\nPu1Al4P1XN1+zlAddPgxQvCxNZQZ20rd72w2EwmEFcWZxhRoNbOxZijyzLKm\n5CtQNmTTzDjI3IaEPxOzoO60gjpPWrCbm1fqIyD+Sl9yVNodCjM1QXN0G9q/\npUyV52IfXrb4YmT6sBDfpOEYzkt4C04cuo2AZOaVGFUIUpEIWnPYots70faq\n5Z5q4xjtq+oE0ytqtLcxbY8HMkHrw5nO4Vj5pgjJBUS7+NFedXFpL1rfZgm3\ny+FI/6cD5pgwsOUuh//tIL1B1NRn/XZzgSA6dNNYSKAHHbNePsecd9XFXwUN\nfvhxQqSaxvS0w9Gc5OLC4csk1QdYmr3jB6gj1pMG7AKnyBfWtanp7CpWXrEo\nhNvdMvXY0eiUzt1DueItTGfXHxeT0XP8F75lFtPyrkTrjZyWSks6PcelQWwg\nQzoejvawWGlgU0jdyXsHl0en5oIb0JLqR/8dmgbgq5l42GGol6kQv07n3nFZ\nz5c3\r\n=/NFi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAdEJFfU+lDYIvsSc2PmfneGdq4bt0aFnxDRl7Mc8WHAiAUKw2hlWaFCGA1SdJhZ+C1lo1QrrWqCU6ecunjCpO9Uw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.8d352305.0_1586295684794_0.6585400746526648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6a40ef217.0","@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/touch-target":"=6.0.0-canary.6a40ef217.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-APLcqR8sjn6r/swnruExZd6EDO3dpyewfEJI6W3+9ISvEcOstzJPOXm+oR8FWAFZepPm5BhqPwVaBT6DxpxM4w==","shasum":"eee14969545c22c40eeb59ba4fc1bc88db7ef1ea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPcrCRA9TVsSAnZWagAAHE8QAKM1RyAVhmndFSFnL8Ku\nDQvyJKXdBt7jtaOAuIpbRFSNtGYP/4gOFXUtLJwQGBXqIDuCtnX2RhIMsbBM\nfYBYWcxB+Jsl6UcznmdjIAjvWAzR5q3nai2j+KEh31Awq82sncckboemWNy4\n8n35n9uhXVP7aTVVx4zynjxmQ8GlkdsjpS++QkPH2Cp1NR27yAB/AUPaWj49\nV+7qwQN0bajD4V/k0nsCz+IhLVWeFy4UsjT1i8ENkSJ3+7zaMKR2uN71y/YO\nia/72EmveW9FK5NmKcoovGQAKSSrh7w7RfB0cJr1IV43Mi3kIQPUJtFU6FK7\nsldQSDoi09jpe3B8ttQSE7ck74tcVLcefC8vWIcFjoj/oG0DucaRqiP7yvw3\nt6/a0+0exL2k+d6874OrSPbM0wJzdp+O63WHGKeOGhbhbSkpuHgxtz2aJGPJ\nuCi57750GBp6x9gUWs1EuxWFsBOcMQSceDz69dIB8bwpQ8FIN5UyF1zmDvEb\nvwqnADyojQc5wbAmjh9BzHFMVldywD7Rgrl2X0ujT6umZC9mo8j3Lu9HHQrN\nuZfDtAZtMzmplVZRHVZ5eW7xb9qQete9haNilgdg7uCCVX9Xc5NP+LQ+Zd5O\nxLs6qCozf6OP+mY5Dr3q2dWJqLy8FKd3jCAvwJmgXOJ/dMfkkQSCJ/3lEGI8\nV+fK\r\n=ILr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDToS5UIFhHXCKnh83pyb75e7IdfltXmTNdxE0BAOJPjAIgZ8t4NUCA5pRlEo/ol9fZVOaTjBChRL9S/aXZA6XVbXg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.31eac79f.0_1586296619318_0.10227639422197687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.6a40ef217.0","@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/touch-target":"=6.0.0-canary.6a40ef217.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ouAf3dGpISnimWs00o3vZLY0CdvsqlfKP50u8Nk52yjEZIOuCPmOFumxGd1cInF8JOGXREKYvZ74a+FmtNjbag==","shasum":"655b671b08d5b1d50737c92719375a0e8948b437","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqUCRA9TVsSAnZWagAAIagP/13uZQb90tJR4+fONc21\n34a1/LJvvQuwbdSeFuSeoGSuYgmV4GBHfdZ1rfmxGDx2p7pkkY6zEYvvXVDJ\nN2zNZDgFY+KskyUaNQ3T3f7B6jNO5zOr6HreZVzoB5kyNyJ4Aqa3wvufvpT1\nRNsrboojWQX/h2uBa+KQ2Sc+X8A5UBqzZ9m2NU+CstY7zMF1N82i25f3+G9D\nTrqmn/lKkiWAi4J+pYALDz13ncgcT5Ba3TaM30t6lFyFjxYmKjfSTl2awmvN\nlHsFryCHtsqLyXj7/5NcQXTuijQs7Uzvh4zKrbAjWdPka9jpntgEOZcEd9Rq\nDrtAY4PCMDnIAMBT5EfhpvKL6ksEdauhNdyV/oBcG11LlFoKFDN7Xb+g8R2E\n0jzwdV3Lg1gd+QweplbNY7POh57RLw/DAHZ8b/Oc7Gwfklhf4p9T/AnfJwa7\nVyZezClvrPi1bqhHzoSk6Xr6YstuDY6GLNhEkOKxJtMQnnAqqmhCLFBzhvNC\nAnZl0YejqQbIKonxxsL76Pu6/GMJKsiLFjT64DKg6stDBRHdOoIE8HfTIxnO\nkZhFh/QWzL5qAssiaeiLnUpPZkNJM6l5R53GXC4a//ya17fmZF8ohNCO+v9G\n8rqvNqyt49tq6TnzB0fW7qoUBA9Fy7iNul3zI2VRlZmf6HMLFbRhAMDeQBC2\nSoxS\r\n=dAxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS7L+ji5zmLok2c5OIf6uNSJOjtZcqJPUYDmiaKoGCygIgRgEZaWvqU4Nh6+sG/BJ/YEHhUNlrrVz252UMc6NZg4s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.ba05565e.0_1586367123591_0.9624206224132679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.9930d9cc5.0","@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/touch-target":"=6.0.0-canary.9930d9cc5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Bhrt++TGlYdWZbjCU8TISqqxKt9eKSWziuhflUdOAMGfm7NoogdZzNhARhjWs4MmeHsBvn+P5c7bFKKGUK2fqg==","shasum":"ccf464d4eb05716858bd6ec05806cce2068e3891","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJqCRA9TVsSAnZWagAALXQP/i/j7bW8hT0yJ1R37e9i\n6KJYecNO3Jc5wWNopytM+9Q81mAJNm5PVcNnFQRJLM1wx92j+1T87SqR7h3O\n+suA1qDuIXec/gmXQBSM/OiCShMzxxwCjaH5+VomfYmd80jcKFxj0uG9Ms/E\ngKJIzuVLy1ZcoiGWywt3pVb4fxThU3nXga7ZpT9+aPN8L2Pu7XNGqkuZ6iTp\nAwDX3id5ZoO74gDSMuNF2n7qIT8eDUu2wzXQ6EfEzB1LpmrNUhPdzNDOQqmB\nkC9+OybaCGf5A1YsGZYD88CU+5Fvwoqmef7XJiGUYpAiSfZyi+75/o1A9eD5\n8z4i12ynV9gXropC4mNcdqt1k8FKonl5v6dr6M7C2LptbXv8/63rJNd+EU6V\nmy01AcVQzSeBLC/dlLFjA1NV7hJHqBRwy5nie1N4CK56sG5T1L+qk0iY0FW/\nqfTAsEJNpITxblQ+mbVieZBHa8U9a0VsJ77spKFtdtV1oFhkVMgYy6oZ0ViD\njUAeyW6sAd0WOgjpKCnKofE+2TAFQHqvVACz/1FJ9lj/1yjlY94Hw3j6LbXg\nupEssVt2f04dAT9+SdahhitoqY32+Ce2n/8G84hfBEgrKyy7hjXdP/Il/dbo\nlH+b7gJqcexoAv6WyaDF/xMoEtM+2KLy0cWHByfWIZ1WgvWAhOwjayIs98i/\nEwwN\r\n=mgsL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYFWbicYFYIWdZydS4SxoJ+xmXe78HgUBWb+U+B+HAgAIhAIA+gDDaSiuBBSDFPUl9vSclGxy0tG1+qMa9nWYBGsDO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.25099f79.0_1586381417477_0.8577319165736232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.9930d9cc5.0","@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/touch-target":"=6.0.0-canary.9930d9cc5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-vKcCeTEajaLg/l4QoIOgoh0nm4duwXoOyfNE1lWxlgZmysygSL0y0OaSWdtEVuAfgQj/D5Pdsy2Yo+Xn/SQNCQ==","shasum":"fa53de116b49cf31c256165b97cf9d6d9279dad7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndPCRA9TVsSAnZWagAAd9oP/jkYMG0jEarAcBStHDnf\nOMcjHcFE3ho1/gfD4k5XFQ0AQLirzMxZSCdimaJIj8BHYC0KQjj2WgRUEzQn\nwiYZKxWK90PkrG4v337o3ruTOI5w74azJlIPDQ8rivn6oRe1GhkX2E9S065v\nicqenPWrnIoILvT6h6IfaHwIHXrpDhM93bd8S1tXY6Sfzlxln4O0FXsbYi85\ndh0I8l0IYWCY6yL8HQ0glocnwcMgVI4iiXdGWoDcELnupQeMEtlCEMvTTqC3\noU/H3JiDNqCSZ5JSFd1g4+pUIGLR150Vu3gVwBD+pQGSobwkWnw4pGZiQFjV\ndr4BJhlxJLUFDetzkJgFwHQNim0/4ifRza1FK8UH/KpHVA4LXNeWOK7Y1fbH\nvzBPIMv9LPffcF24QjlEZkNZ4F5Ei7eVf8cQC53rzG9oVo2Ky1l14fcCMK8U\nnziDeW/yFLpHyM5O99HDZkT4f4J70II5sD5sej7yRp5v+4hN+308eByvUth4\nk1xUB2MPODP8tuC1CKWXiaJierrWfeuICp0Fs1fF6RwFfBsZ8JS20sr2KIKs\nDx+Xf2E7Uz9fLUPMgGWjWfY4ZLGG9unx87LDhGwA8Ym0QsxsqjuBLE69sDGT\nFn0cL7a6Wb3kRI57sg8u+bkZRgpo1kLrH3GcBoleOE6vmq5HKL2C8sVOeP0t\ny7Rh\r\n=09mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTHMrznlLdvIGTI1ESOgxoEkhE5mQeVIqqOdE6laaEWwIgPUn3o5QgaGdFIoz/RveyE1jBsg8d0ToheH8M1lTnQD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.447e31c6.0_1586394959003_0.2981304333663195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.05f5e1583.0","@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/touch-target":"=6.0.0-canary.05f5e1583.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-OROBVwb7Dh1xEF+Fm5J/ko7GhObXjqZ8/jBz4lmIbu/iwzTyk4aXthrUgEJNRxm6B9H/4joaOFBeJjOJadMUlg==","shasum":"e598880c4b25041e1b11c7eee81514a829294ee2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlWCRA9TVsSAnZWagAAlEkQAKI2OJ+RUx4D3UeyEoGz\nHSHGluq+XEO3a9rkncsNTXP6BQdSHBzBSU6i1BF4naJYznfVGCukxYkY29vJ\nSENcTVY85g5e/mTdI0qqCpUtdcNI5kzrnxPI8yw26mpV9vnPLMwSIOo8/hwu\nXf6hDNU8JR+5VKzMnef6bx187Rb987NoNvPqmi+1diJcv1ZI6CYq9kjHz3uY\njRxseNgVFqfXqqz0JfgeDE+oD8irshmszaKXx4jmDzEEYvFS5o5RgQHtkQPA\niPt6s6FFnfY4Md0XXegh0BfUiWlxzwQ8LEP+ayeO6JpcL+kkofCpGfvABA7f\nTSp6kz9yhIp3lxKPvEsl/KCd4f4bYQj+ShztRI4OkW+36DaUxgBKebDglNcV\nc5NDS7ZuDutTvnghA/Uhxh/YshQKwcccTN+UFi5FSlE4kwq6Skg94F1DKwi2\nvBg18M2Uo6S834lcf9PGRPM0/Bo7Jc838C3lzLdw2RjcJM6HNDVJPYtW7d7i\n9ooxmnrwzcRsPv8NiqgceHA5rRGBf1il7qHFBLi7DzPQ5GbU0qbT2h0t5fFr\nrSTLQQOYMRV3CPo8obrbLXmDSDmJZBfsDSUQkN/mLyZQ0c1ildHnTnrBRGq9\nCMhBYimyqMJuIgpEXvR37lnpxAcnWWFtzxAN3/Ox8yvyQnjTF4LQmUzjKWR5\n+jML\r\n=PUEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTT4/FdH6uKBO9Ho22OZsRLNIxpHtMOKSqawmrJYwjlQIhAI9CKDHIRudHgjAwX3v7nnVtJvTaTdcxMejI643qxJC+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.d6dd84f7.0_1586395478346_0.2966182646015736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.05f5e1583.0","@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/touch-target":"=6.0.0-canary.05f5e1583.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-z99PNh4tLwzcDrjC4RV1sfMMH98QXSLWgOFjI2xps3JxuW2DVTKHVNe7OwyeAJEd2vf2PruP4AGHulmIXkwQkw==","shasum":"c66c43e41f304bb6f1eace8373f127f4532cb25c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39PCRA9TVsSAnZWagAAD3wQAJp2LGFX2i7HqNIZc7KJ\nG7HoLFURXT27J87IMQvzXZAAHJ8i+JtVqQjvYANOqEYjf1Ijj3FAeBaVvPSX\nIIB2iEIJQaeWJAh9lwmlfwO2MVsR82hz03mqo3Ww65AvgJFk8aYcoDvpPWUk\nFpMq3TrrFHuhLazALOBUHpMDUEwFY23PxFAL089svGSRcZjeIhqs6NPPEyjH\nh6T4VDAKug1ccb8vDrtK8ZfuPr7c3UhUQzx0/slAyqwKkZbudmh8DI5LMvZ7\nHTGexrHG38nFDAQZZzL8kVWjyCl7iGmfgYM5lsea88FlfBFsXgcTXii3THLO\nBhQuIw8diOZOlXd/joohVMf+vvmlJaP4RGIfkWq7wVko4X6iNbXkFZxNkNR3\nHcdl9P6ovvjovSA6CX1RWQhHMMZDFS27NXSLV6qbgLwMkbr1h2NVGabC3rbc\nVo7MZKD725M81Y7/Af+ucv+P7SJNvTqnGJGkUAlMmmHIvSj+VeeLjTAbEjmx\nJ9yEW6y4zuMWulvJN2fibN6Sibu1X6DIHbUkC8TarRXus9yWQ6cESlY9aPql\nnKtshfe96zAm0UkhHltCz+m6klFU+qiZDkyc56VDICFf7Rs6+OdEVPDfpuRA\n0lYBshiWw4xEAwkQMKfF1/cg9Y3A22/h7VOxqLm6kuQH3V/JDygwhsXqle/E\nCe+4\r\n=rFjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAztYje3hoz2l6zwqfSkoknKlXeGBi+QtWpie3bH68EJAiEAjjEar5rmmbqwqd07fktCNZ6rBlYld63tnWo6gkr0yJo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9b03ee68.0_1586462543309_0.603319074787745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.05f5e1583.0","@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/touch-target":"=6.0.0-canary.05f5e1583.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-jFnUAf0NndVt376x/FZWlzPKoKhMOV/LrIIBZa0TsfNTEJDG7CO8hYk9P0DZMYOtaJvDbILbfJtfbQBQBJYhPQ==","shasum":"cf7aca3530dfa814496e4657587e75d55f26ae71","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPbqCRA9TVsSAnZWagAAGfkP/Raf5QDmXIBLYrmtL9f0\nA3UZrJk5jqlklBute8vmPg7kkDYr5X+nf+ClBEzw4P+Kq9l5ZMZKFd+pwnn4\nrpj+P3eJFtSGlSxvGa3PfVT2QjBqL+9ETGeNtL6XAFF7gOFsB2n94aUxpwPC\nrlNr9dghsuLxYhbOSxHg5FOqImocsa05T+Vaqk6qjV8rlvYRzi+SkPOlVKN4\nK+NxX27OgVG3MWcFWe3TGl2cbzuJu5aP96WNqXaUScxFbU4NpUZtXCtr1NH/\npYpuyohv8H/0MFpDQEIW7lh3HGu4TPIwgKVWT1iR8vh7tZ9fXyC9O4yaCrd/\n5xPmVjOOkeAVucHqO0IWx48Ci9v/6kYaU+V/9oygvzogEbaboMVzWw6ifjq4\nzS3RTF3nlnl24GBppLaC4iZZRjkdQtjscWUto/pfso9+ZPWx9mXmHu4Mjbhw\nD46c3zHZob0NJ7TTqoSPsSqnfYID+ZZWc/wMrjSL2xCRZwUInfCF4JxP3ziI\n+7RrL9NHjnsaP2L/pq0+GjOztaRU/9iKaJWMQjaAYKKZjYthimPAfmpYVECW\nQevDf3OsIxEuhriwBs/lNjBwANB50iMRyHQGKdgauRGpn8+YHkvuBBKbKS7T\nzauU7VMdeV550Gd31LsghOOOuoA/ZebYY9gHrtMb4BlPPZkXomqBc8lqJA/1\nlGYU\r\n=LC8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcbc0zEbIgOb0G9uVBVxxZ2iOc05rzbejpZaCNXFpNUAiEAkWGd2Nt7nxAIu91DV5bpZojq0IeTsRFSAl4C6VwyTqY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.bbc25b10.0_1586558698132_0.5429388211715052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.f172b0f90.0","@material/dom":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/touch-target":"=6.0.0-canary.f172b0f90.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ONryb1vS0gJCw13/gKcZZY5kBAU6HLKRgte82VOHL3gPJzyWCXWE9yf8KPQdPH4W2CUgh/7ryFhWBtsyB++7Sw==","shasum":"be5ce9260aa5dd9c002e1bbb926b8bd7acc28524","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aGCRA9TVsSAnZWagAA4GcQAJs0P8jEfO6/VzXzX9cb\nEDm+C8HvSwDzwn6onX8RTz2VtjuJQUNp5IA/xILzKu2jKRZ5LTf4EvicJLjT\nubERxvJ/FIhdbMd8Ty4A1FYNAVyMadUxEqmBAW2P1Mz1XksDY/KVWB9UHK1c\nleybURXc8NapI/KSGt1yuoFyDwiPYRQ8HZ3Lq3ElhGDpWStc7j7j1zyz2jMy\nx8guA+OSHsc1L7HZSgax+f4ctslnKnh2G9EmskUv0HV2UgK61gdeyMWI70XE\nOyGMigeqrp37J6r/Yl71kUvktj2OxWLTMhsgIS0TLjmPRuBL5Tz4UDYLgZJa\nOJjUMAe2I6dmmaOkMy3sGyzmo4MlpYm2jVehLuBuspYismEcW0WCBdfM+57X\n3uv0kaznjF/L7+x2yxQMjOt4GfgqFqz1lm8cLu0Qs2jv02zh1Cp6IFmbxznF\ntTPg3QPqoZKaTbeuHtz6AADPd+DIWiQGflEf3XxP0VKCGvF9F5oRBRqLe21B\nytvRrTbnIeSb3gwzfEcB9NsExTw3uMZQj7Qf6pA/ZHB/f+Ykw2LnNAzU0ES3\nCIAFngB5bjQTrV9xDqLJUkeoOK5G5fqv0NoqA79MRF7tfnQBkKgxN/tTciiM\n+5PBAkmgWej/hjBzCtKE/eTKQ4g7A6LqRO3W7tisM5VxZwOemDUfU3T80AEY\n9Vmm\r\n=cUdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeqrDYMU6EiwQBFbwwCU+QRHUu+OJjyhm26u8/OGelaAIhAOr21oSK7lfOu0ANU7lE+y1IfgQixBgoX/sWIFQksv8I"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.339cbfd4.0_1586972293535_0.9651157737483282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c02642273.0","@material/dom":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/touch-target":"=6.0.0-canary.c02642273.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AbwJNihmyudJV+xh6b63FwWCizxtXWqs6NS2DT8IiD5TQeXMz4ThlLGg/6xky25xLH7pjWFHSMySQeVmRjn1+A==","shasum":"627dd2d8d641feb3b6e428b2f9acd501895ce22c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2igCRA9TVsSAnZWagAACmAP/1FJqoKipWo5exdh2saz\nres6UXMaMF0KpE8K9k1/36tzww6+wPxm6EzB6W8kDcqmffQOx2di0OU8v6Hl\n65L0dyAb+B+9biTnumRIjubZZcNvELIDdqsX1VrRM/r9jcxr0viE2nMsDabP\nhd8vanS5IjPrQqt5sHk3YWSLodj9AfBX8G+zozwikn1avq81Kb3/+fzMLIjc\nNiA80X3777MM/QnQXtkDrhMJGUqgKLblbKNq4T4EaMvkGY+2xw4n+2hI9tbQ\n1E8iWEFexiKVN+xEtSxJ8wuYYvHwRHem+kZQ9rWLng5+Zz+ySWR2y0xC72On\njM/xIYnF72nDT3NVYVr+IwTDg20jwPGKcWrUQOcxfurnm1+aL0pR5ouxuzDQ\nUbuaPTDtH0q9daU2UNPn7wnfmy16TYAMJXoauAUZYo4rOghosx4VDaLr5mBx\nf2C+Y5yfWmBNv4O2jy92DK3o6PshbmauE8fhzhE1JcbyWBepdlf9aiiqjn+d\nVfPo/ML90yRXZFYVemiaG2QS4fIK0icJTrZ4KB2QwSb/2WUUqiQeS4L1jHaT\nwb3WARNMzhgOKPoqAxa6cXDID+YKRQ9whoj5TqT+DPqZ7yVURGhVUb5GokZG\nT0pOO06QXPoeT8EDl2SzYVtvbYfGybswSexKK8BpfwaMqlzpcOUhIGOy/yQy\njmtk\r\n=IiSJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6SB4GXlf5vB3D4gcweqJnAyL8nioeQLIv0G/MwHkpHAiEAqu5qGvmWZAz+UU3D75i/Dr9eGhe14vLMLurMhuGY27c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.b74ff19f.0_1586981023892_0.9912754291886647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c02642273.0","@material/dom":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/touch-target":"=6.0.0-canary.c02642273.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0rRn1w6iSH7x5RaTdgyhOHakPyUTFFpmK2zCqw0HuRVhZjrfiD+H4AAPTrwUd8vfMIPHTiT//XZ+kLWZop/9zA==","shasum":"b8fb8a353ac1708df233c73e0ccdbb99773e140b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41kCRA9TVsSAnZWagAAdsAP/3t1svy+EZlI7b/LzWaP\nmAMYFEq2iekXtTMgmBY8T7l/IG8IbxBDthv4O0ElMlbGNNDniUntrtRuDxmT\ngdXwviz3TKCJ9Psd1sDWrZ+hrgiGNYQbPpc2qjRiq7z/T/9vTlHrsok1rtac\nLihacqiGBApOt/BO4LFjAhMYF3bfFr8QZHSIkciVC4DJhGv/31wGAvKgoBeI\nZb7MC5Vh0OQ422CU2oi+sz/RpwUKs2fddT5w/8SIa76oChT76VHwBip/AJl9\nk/JJ0N1HK1BCc3aY4vq67ZOfhLo0ELsp5UCccgwT59hy9xZeRZIERUWF3mNj\nZdfz/IQG5mmoP6FpzcRYXh/BY6VigyCwLEHCbyzlQbRcdYxDiawBbioHqOX8\nKXUh6zKsPIZtAwnR2mfKSYVcmhyWPyP/ybWSTln3IypYcDvmzAfvHQl8rGKz\nhhki78+44kBj6mZggpomHfQ/gr3rB6l4wWNTOBMongHz7inZnVCNls8W8yf2\neGZVXgas4lQ1i5qS0ZqQCT8gTpfSqUzK7MsBz5iR1+XRQvc2bv9HT07Aeelb\nEsdpsPJjfnzs42nPBq+Htsh1Gk/E9+9Uml3pNY5mvK6l9Kp4TwCEDzKX02JU\n3VHUmsaD0wSH3sPjM3e5jz5qT+yzexbb8qnfjFxUct+cxGM3oZTH8t/Sg37c\nhTYA\r\n=rKr7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXak3zJtruw9nSPiUSfkU9zlbA60PEdgEkgq5gyij7GwIhAMDSBOqKW+uWkoPYqEC5phdV7uhkiRcIwSxsysbK+bYj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.aaa16853.0_1586990436281_0.0817220440569768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.ce6cb7024.0","@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/touch-target":"=6.0.0-canary.ce6cb7024.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CgPvkYFxr9VMDxX5DTqoOrYIQ7cODfvxiWAcbTtCZ1npHLd857WqsRFCuNRq+BbU25lBTlnJ5EpTwdj8mNcorg==","shasum":"284353f74134f437bfc1ce5b101671eb68361220","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpfCRA9TVsSAnZWagAA8RcP/11XvGon0sd75EHPFOTN\n6rxEVerstW0YluyCZnwZ+10wiefe0Dwjq1j3AT047PBFqENi/VnLhGrHbLFK\nl7E0OzzjPpElyVrIYpzhubO7tRm1Z/Lt9RzZvXi7UtMQDxqST7khU0Dyn0wx\nqsP4CoxC8A+k75hqA6Lh+ZG7gEzlC5w2l03L8RRYws3qL+xJL597Nd235c4k\nJWFfIU0KeLcbfHztp1wBvbWiX2AkVr6BnyKgzBySr0vX1b46n3LaiaTkEK4+\nP2bLfCfXf4PtKGF8i+VP8UtP4CA/JN94ktz9wvLrXMOkSGQiyEga8MDq8Ntw\n8loJaAe8F7hLdfdFwsJv7JUgtH5Hi836yiXqJSguN38YJ8EAnce6OhCy86qu\neeIcDz+ch8a44oGdiRsLvowumXA9KoSLiIlmbcn9Bnl5gjsmhFKbssnPJyPr\nqJ45UDwUdQrTx6VqoSCc4zFsyv9jj7zCHXNxg+ekqvVcrgRyL0iJGW92vTTi\npWnSxVhDZUhnYCQELdv4TugJ+YFxlUBVmg+laMjlSssOfwu0Y9EBv0s/2kNY\nmXxbpezmvKvsycwGRzAXvhkvgxO12lCPypfbrfnBYSn8Yl7T71/hikygHCSQ\nYj+d82h6Kn3Dtbe0W5cYnKjyGiVJbK9Zl8sW0epBF/geD5BHSGMHxJ5wC5ev\nxCZg\r\n=HFo2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYXa76fFPPGbZm4FqwZRv1ft0qMeV8URJxO+QRlWmcpAiAQZoas7nMKCx+ILC1jNr6RMoQoKo1C7qOsG8Tdk/W2Cw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.826b23e7.0_1587063390644_0.23385538641085457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.ce6cb7024.0","@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/touch-target":"=6.0.0-canary.ce6cb7024.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y+4tfqaycOSPdv47byCEby8Ym9nws5EOsvIRh5G6S7HoIBAOompszmqt2arOwZ9VwPj3XORvoCalOunCgLQFNQ==","shasum":"0da97d6c3241e67a52f9a8532df2fe0c32ada53b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjUpCRA9TVsSAnZWagAAmCUP/2/suPk+QiUt9wH8pxJX\ncrJS+YC3bUZvlGlqUNnB7NzLr3Jv+BeR3bFHDREXQ5kUtFCQv4kkPTS8hX19\nqtAc4XB17wWMHlb5rUf171zXICHaW8BAiP3xNJ3NcTruh1g/rzpGllIlUmVs\nNY5ke+wYRrwwfG6KiEAQWM2BBayUy6IvYcIxYrjE9fmr0zW2ixIwJgxta06s\nLA2pdtEBbsMcwmT/qUEaBBvGD4BklhqGySaX1pP3ZWISnr7yMN6OAj6T2Mmq\nUSzFXfWfCNTmoTmUBLNas8tyMbulFR+xQZxb99SWyRCdHvSfQdMLQKVGbIdY\ntTbhvSAJnYi4S47P9glaetz6zeV2SGn1/jjT0IMSW57Z6JMcBoQJn7VySFW6\ncJndJuuKQpJVH3yslRXpGA1znBYH5VaRK5V2V1DNFIaIxHgUkS0BOQjPMoSt\n2QBTw+zLQcOLZG07sW5pxO2ckgyQgX4PRiO9QkJitPeIdAcq9L6Ok2AV6YLj\nQrDfN5v2fCkOfkTaYs01sYhpnVA7HNSVWz4SrHxsQd6w+1R4f9NeyjK5pxdW\naxfneC1V6k25vCKDT/i/0WY1wlt66mhFLhyTWI1+te+GELiRJBEYGYtU/mj+\nuOnbXC1eSx9e/BpRsSclvWkesP8QFvTo1b7dotqofssu6paWSbSKw31O/b3v\n+Glf\r\n=jJse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD/5s0bOsGCkpwtlBeewWIjUlNb1KTyYj0QPWJryxIYgIgGW6TqWI9U2bs2YSSH/Mqa/6LqSYhbBdnoKi5w/x4LDo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.e1ad2b2f.0_1587164457399_0.6733457291693565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.ce6cb7024.0","@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/touch-target":"=6.0.0-canary.ce6cb7024.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JtWKixnZlEAr5PUBO7mtj819s+hwKlw6kvbRX6WOkbztTEqDnP12wks2ue8pSmDX07a2zxCA/Dx619dDFuSlRg==","shasum":"8e70fcdcca976022991e814456260a675b73e64f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjlZCRA9TVsSAnZWagAA0gMP/3dzQFjBC44nUJdqx5X5\nQOUTopDPiUTD5OTiPtg4+WOxFdJkO12OT83fTtuS6a8Gmvt4RHAHrK/irbnN\nYwBXnmfrxzmFUUKjzU1OnYcrt5hMXkUU/mTIrSRC0rdiTWHJV+8APEeytYDF\nFevVFrWLYHZhiR2QVLEVpSso01K+1u5ofHzb/BdXZSYVZ7ZzCCUHIKYTNLqr\nWak+z9M0GShWOsQOMGeSIFB2vYIQ5qVWDjEhZxJlC+oj+zMdQU3ekTZ+/394\nPSaOKjUjsX7VN35HGm4gMShgMDabEes6YvZqjy/ZnANlnOb9Tk9tZMj4XSej\nc0CcAJh0LP/A9jgQwYAdizwAKHIdgTTHzltQ2rvZGQPZAZkn2p/gst9FeF3e\nGs3VNNVdpU6r7Rl07fZ/8ky9Kw4pw737DijX6v5Alu8rCVKzwp60qsFqLzEf\nKgiBw5RqXepHi6Tml6KxMJNikzRQnS6mdjJcdx9kPwIc6Q8jGt3+HLtUIKfU\n7mROCPpf3B5+rbjMhtX9Ys1S556kBkYUPRc4iZAjtrhVnepnzgAKqJu+Fpso\nwb8SL5FS+1syXXtNrjtI95k0uhJC1Y25fApXYATVTsCeIM2L8n3riy2gV8Y6\nAbgM6MivGSXKKF3FAylRGq8Gqn1dhEpGAgm0LRP99NmcgQzM3tFydS5imw/S\nbUqU\r\n=HunE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoVtV5V3LK0zUBilGEJQY0RccDJuihlfyYMx3L8quzYAiEArLhtbTP5DHpU/0mMtXfXiZv/dAMxTAiGJ4r1GErl94c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.bade5580.0_1587165528648_0.2897184375722084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.ce6cb7024.0","@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/touch-target":"=6.0.0-canary.ce6cb7024.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eiAO+HlqoVWFoPfa0AIofb1MLdOpms5ryGVFPZRWjML0yC4O7BcFMPo6bY1F1R/B++xcfmtsFv0suwy4BXfAsA==","shasum":"bd315ec7a18c5e5bb8effe5b22cce5670906515a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkaxCRA9TVsSAnZWagAA1KsP/Ami9N/JSF0hBlJLZRs3\nN9LpLx2Lj1HceLTrDUCsVIoAMcG5eIMj2FgvNE0glPuVf+iGPm3SsOm3mopp\nLMR6AfOKoMN/w7La42fkw0nWHIge6jNOER1oQbTTVmMC2Jn05HEfr+M4bVH9\nGUix9X8AayllfcDuzWeuCASAqsLUQNCwQ0sssNM+mlX2LsmRFkfsBrVou4T3\nQhxR1GtS67WdfBUlrXPSFilBbmQ2Y1SQ0WcxQ7JXwg9RnbwswJ58gfV35jb4\nKQCFtw6QBfgvM9kmyxezr5PijaPj49Dx2bW3PBUI2qZGz5VMQCAOa0Hfm9l5\nizDzTwiwTEDuPZ955VkDkFICw6Mns1wlNa/C3JApYv8kJH0N5qwSHUk0zYAF\n3p75kH5VIdqSJqUgsTavs0lbZOPjj1ssxJrsATa/ynsG5o9WYwOsoy0ocTgS\n+Nf203ofCqKjdoZuT1LtTVE2uN/qbcjKqL9rCwZn9a69kEeWnWHDQSX8fDZQ\nnnZ1Rv2Sj+OMEPLqDf6CKScAt2BJZpb2shdhBrVvlRgkejVnAKLcAnMNssXK\nCTnR/VQIGxpZV90oIlvbtGCpEkyjz0YVlEnXomVrwJNo5BX0VcCzgppotE6r\nKq67L5QYO8W+Ed3jCedAWHTgfDKdNfzZZOS9sQv3vYXoGeheAZXcP8mtwsaS\nCBEQ\r\n=3B3b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFHJqXPMG9gM51wvgqWhCl5QL5OYYpdyQ5rg9QChZRBgIgOoDxMhZyTHLI4WG91hw/hbZIPFazLAOBmcimD2Es46A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.dae38247.0_1587168944597_0.6389844345393851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c4b4bba96.0","@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/touch-target":"=6.0.0-canary.c4b4bba96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hfKfEUhZvlB3CfcttDZA6lz3zgeCBYtKM+sNOJ/YpS99uIz1Bdi5E/AFMdHsIJvt+xdaGnKeAwFamo6nb4GrNg==","shasum":"7a2bc9c8b08ccc342449f4a10c26b42b04c71c5a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkryCRA9TVsSAnZWagAABGsP/1gif3T/FMD5LHEH3tBg\nWXtlY4wgtMXRkD3syoCyQBbwbaH/CGBEtpxyfHOia0O4hYbOYSLvd0R6Cf0v\nWwtZsTE5k//n1aSLZBJj/abh78VtVfQqNtgP7P7OYJ9m86UAfsJDPdO6nVjK\n669vgy6TGInjjM/w1eWJqfau7s4gCUIJ6Aj1QEtv83URMw0d6DRUVCqtQZfi\nMf4FnWNOqgl13feNDGxBqHKTWgO5aJfF4AegM8iEZUZIowzHOipljV1d174x\nQRmimJesUg179jrtXOcD8NW180Uk3OPs2hJhgvmo31oQXdFAeaBZf3/Eosqf\nyFc/OuiHTDYCYO0/3sC7E4bxCvAt1ZTrBd78a+8/XoDwbIBbjkSfey4R5ZHl\nOQDPv7igtHF9hGf2R7E8CjO7xGxIaKB541x5cPK4NzVp5K5y5TydshbmqBKT\nw9a6sJ2vEwrzmMEUg56SZdI//MuqzfZiTvx3Iu07fci7wCiieRPAzwVVYGt2\n1PAFgVoVIi5hMDLZmfpCBRnTJjHsHEN+NyWjpdMouEekn2+sXZgd24NmQOu8\n2YbSQCYa9uvc3wRAOEfxHg7L+npbC1kppnbgJvH5NNcX/DC3gwo+FeROfAHr\nknQcJfdfSNPyVt/FRnK4fweUxLUoUu7KsZKn7szXTvcl5bDYPM6euiNqNrbq\nEqqi\r\n=5DMG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnkKlt11Cvdji2O0MUDGe/5SVoQhJ7Q9ON4LVjf1SxvQIhAODCmvjkTYBVTAA6v6Pp+YMfJuTimuv91zADN/JZCsOA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.a04c0b82.0_1587170033849_0.4467570464578825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c4b4bba96.0","@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/touch-target":"=6.0.0-canary.c4b4bba96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+p8Ewmiw2/QAt0F0FX1jtyvPzEt6x++y67actnn5jgSBQoJX+nH4VkutyL0cbqxQFxGc9tHanhUkrQaf+uOWMA==","shasum":"435322dc90c46bed52408b734fa76b41f7cc2304","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetKCRA9TVsSAnZWagAAvdEP/0Fd6onguDZvWjbm8O+v\nBzyRT7aQdL8xNn5e16eijgs50TyQmUM2/mlUKNi9bzkzxUGBejkoSVWtdsa0\nO/cRs3Cq9VC48L1zH6Acz0oKU8O2bA+ROiq+6wWaZYE2sd64unYh8QDHlQzU\nGlYoSyDFb2Q6hSozyuEJ64u1vUR3B5x8y48Zu5dj19YttqE14XiUMEpJH2eM\nQePgXPuPD1ReCzicgFWK5X2VpHIMNyNF1g1F5bwSA0876c6Ux03zkq3fifho\nuaQBGU9rZPbu6VDyYPylCd71z5UW6OEotzO7zrLKL4dg7mJ9STViA+7OfNhI\n2gYZ9/Yv5qdfWLp3g/bRhBliJ5j043LNndacga+YiPUEgXs/0XaoMSjJtI9u\nxC5wYl9f0MCNMv4pLeT4akjEGbHiNoZuu32BdB7R5CuR/jnmzLfqZlBbVIwB\nWkh66qXpfEsWjUHZH3mq5x0AylQA8WYyl58wMfRGERA2/lKrJU4Irwu78nL7\n0lky5eXaFibfvztrRSGw5ob4h+/iQ0y9A9Txoip0tk3X/d9Jh5cfFtyx2aCH\nFbE+XixbFX75t4KdLsrJezUnuEXMN08yfksEgy1xMapnYCTvSiFgh8WuvJ1h\nYbQt0eXtLdsLdbN5lrKVfbqsPQACiv1YItUlI6m4mEHG6m+JOo9rRIFyzM+R\n7dsB\r\n=QU43\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfGEftWtqMK3mX72Fy4CkUB6A7RuMguXZOHmxbcxxiEAiEAoe+soJa02oliu+3khD62NqIvK6Oyf1lNnr1wZzTfzxk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.715decfe.0_1587407690156_0.37457889044603676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c4b4bba96.0","@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/touch-target":"=6.0.0-canary.c4b4bba96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p7RGXoELPzvWl2XN5FRcLT6Hb3ijVFhjXlIqurz+A53+mNMVSKoInxgL/NgRtD9Ft3CF4oV3BHEVZTi0ycThzw==","shasum":"b910b5f23c4722a09314cc049cd4acb3743d80c2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhUyCRA9TVsSAnZWagAAHCIP/0NwvEuAn/Nj0AFmipk/\nt+erNrlUCF71cVwwW3p617HBWtTaZcRzpEqU1RBm4YBHfp9Kk/8CYfdiC6Pi\nPOlwaS09g2U2525G5ybUpeVy0LwReOcUX7gs8Ei130ZeWsrFVbtLF684f8+z\nYHNLyimdx/LwpuB749fNmajIv66KWlnASugVsZRzYjyRPcnQ8dAEBnScNt5m\nzh3rUrUg+3HNc5EKD1kATHvc/caUsbNoxgxBGEAHajMKL/Z2V4x197ixEzkc\nMcB3SGbRdbH2vzxlYg3ucolL8rvaeyfp8IkuebO4WgR1Ble0OSGZsVTOy1aV\nEVTZW8l0h8fGtsWtRSh1H7j3l1v5cN4AZ4k6sMBC3CEJeVWZX6czaKyUvubo\nhKlmiPZILZ65K1CstXjsso8GI7tEvic57/JqvvrgIE5t0y/qhyts4otsSQ2z\nklFbKfwCPibiR2E2Ch/Ffrdico7A2aibBtU8au4YnRwrBwZ5NOBRs3k0x9x+\nibeBhPo3jZlLT80ysMBphZ40VqtaH64HFGmiVf7mQrf6gVboaSRV1ymFyGgk\nEqmdQYLOw2naGp565E2qwTZJ3o01cD6NEbHIisWFTDffyX2ojrMLsAG39Ool\njCKD0h8rhrvm88miy6eyQVerTaswnS0GvdQ/PKObhb9TGbMH5F1GNFtQLFjT\nAtF6\r\n=eE1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwtNsufIkUmI24m4jYy20OBpPVtjXe3VwcsuNEUIAXlAiAgfSErSZ5U8VCFIC52T2+7qC2MvhZlFdj5ccRGbGhOlw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.c862cd04.0_1587418418290_0.7317897458427456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c4b4bba96.0","@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/touch-target":"=6.0.0-canary.c4b4bba96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-h0ZN05d4paPq1HwD232JGwaidvf9ymnqF8z9zSBieRP1nyHEZMvbxV0otq0MRLvJkDiCzAOv/69+4XysBPzn4A==","shasum":"065d52fcf214f1f6b93444e49aefbbe528483518","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjA+CRA9TVsSAnZWagAAphsP+wUOUZ90VvL43B/AdMwf\nlpXNnb+xRnlZlpZJHRO1nuBzETU8MxLDFXy/vzeKxkSwCHRyGzfk7hcjdIOJ\nT3Y3Q8tMnpKkVSNdgHVADARQEHG4l6HdY89CdXIsGgHrlpwgV49cuou6koEj\nBTBnFdL+tqCK5hD/kEHIm8I/Oc+p0i9Qs6EvwhLfN2QgU/yc5KDUnLypYmO0\nrzNDDJFGYxWnPE9VcHzO5YcfkYWJi8snYhXsZZYuqj2BVG+fiVnE99Il3glh\n9A63IV4HLfrxxvWo3QOKrao7D/MiS3GlZfn4cmZo9GbgsB5YxQ7LdiS8FmTq\ncir9PHK6PTaSLvXwrVXh04sVAWncxdkwlR8meraCa2xrdA7k5cpF0Iaqj/Mb\nk3QdGnYrbrsJnd4OUi86YvypyEHtHJqeAPQWUVTW+r252I1bGAmLjwVdXnAE\n9mKQa4Ym+L01Fz21D5o12r8ZNI9a46yM9/HQx8FHmL1WdBZo8hqeL+WBaWIf\nsXKLrD3WauE/2runaHHMt+A1NwbAqT6fvnSkQpffusJlVowjb/1NAb7Tnaxl\nHS/s7bmzfHem6TVGr9sIe/3/T9P5/EQhwHjiLTZpcP0elHupnuVcetK1etRS\nkz+hgryhdZeWHmKJOeFgWL3VVzahXAxD2EHp2rIuEa4S94Eim/X6mEhkz1JN\nBAqF\r\n=laPF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtX0dOFZDG7OGAKREzI2Mfy14gU2dGMnn54zYMzYBwLAIhAKz3evvBEUbnZUo6gyZcbOl1zDMT5nlUb1CMI21eZaI0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.e9b01b35.0_1587425342273_0.8104607150592247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.7b4482402.0","@material/dom":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/touch-target":"=6.0.0-canary.7b4482402.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2DZmOWH2oQNPD3qN8aTHMDplxsj6toDoHPAZCPBRSkPhrqORSWGzynSwp/ePbpwuXc/Kl/K1xkiR6zAEb+KnXw==","shasum":"41d381a2a8a54d0587e9246aff47bbdf4630b7b0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkNpCRA9TVsSAnZWagAAB3EQAIYbZJZtUjYmrutOONPa\nLMnPPPPBs9WbtEOO1J8nn3moqXL7gKf0dW4WX5aXc2BZqOuu/YSYDp2QojU+\nldyVLq6jLO/Oyk1/kBPW7h/iMLCnbbVsSMObeoj+XX0yeR5Zu8j8BO3iHlVN\n96QUPAxY0y+nR8I9GUk+4o3/RO7zn3sy0kRJA95vZivFjkG/CwGRrKfQJrnZ\nnMSgLf8w1ev3BHyVKIrjfasaN5c1RREm7W0y15pRi4aQ5sbINMajT6cS8esR\neGptdSjBzxl/DWxjM0TlJH8SSjc1CiZFkamdcuiyae4Jav2zvRj80g/QxV7m\n94NdNcuT5Pp3mRaI+UmuXaJ4WiZKd45ZGRLxojP5mdhESdlaZoetotTM/YJX\nRNN08GHsR1UDNr/xkHObiRCpuk6W27QOffGa0Oj4MxYkS3lUvrbzn0msfSRn\n1XUFwy45TtJaTMjFaXKh8KuTkgWkHsEQE8gY1jS6+CU4Uxo2qlpZprkohsuf\nqveW9HvfeaJOG8n3M5hGrTw2t+iHUqR88P7EwYpwIkuuUMg7+SuqU1L2/DFw\nJhzG3B3AewWcbSm9fM9BmZ4VUt/+lY8i4MkXA3fbKjEsN2BaD+B5mdRc7HGU\nO0ux1QxQ+4tgx3/E0dxhtlfEC2CvG79O65oRJ6Qw2nWF+SXf14d4aYAhd3Rw\nuLxP\r\n=DxSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjOz0GacueJEwchqjDorhR+8PaEAc7UxhfIdyOYe3CjAiEA882PNbJsrQdhfpuh1l85yApmoX0FztNGvedk/ndBmlw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.ee7e8989.0_1587430249160_0.7677343757670214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.deda86d8c.0","@material/dom":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/touch-target":"=6.0.0-canary.deda86d8c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UuvDnKOh5NCRd0BBsqU/6lrmI5UBSzL4y2j+1h0fI1pP12ovF7IYWRBPsE/0b6QCmepI1/RS2dbpcRX2DUf89w==","shasum":"f8e09331e21a0802b7ad5ba830cb7eda3539aaa5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz1jCRA9TVsSAnZWagAAQRIP/0IvMJYiNYzX3iZhncZI\nMxhfycO+mAowVYRwDKlhL4x73mhUiABnsXusVHrio3QaJ/qUBZczKRX5YjkL\nHsHmG8kK5N97meNjYxzOH+Z8EJYNihZTYpH4lhQf8AxckOUuqCTYgWAxj2lC\nyp3elO77uk+5xQmPQBo+2uAPQDvHZ/kN5IYcv0+g1zWD9dhDMo5475i4FmXR\nyIRlepBlG6iHc7PkJkB9BgMoUxNFlJkeewD5yPBT23M/wep3qnp8iRawFd/5\naRM85GYzUlkkFDJJYlOnG52kCkARUqbEfMgALjyyORsKcfqnUFzy70p3OD0+\nlhIbv/VYo99F2tTZLeuFl0eCIyKeO6sQSe84hQx9YiW7+E453UeKaEQGAhsB\nNq3nfxmu1wbnjSpWxIOjT2ndREEbQoCCWTZcUVRlwIV+AuyYQsPJtjL+hE75\nCL8+NicrkCS3udLnCE0KgxGi1CuiH0hAO/fWw9JSZSt6ywYgN1omvLVEcCl1\nUhKgRCwK7u5vvWbBleOmrHTGp7z2Ds23O8LqqYtHNIvuDk3eKE8yEQPV30SG\ntSgNbTH3+KrgREQO1D97q2ZOQnD+8G2StYvZ+om86UWEUf2rAoyhC8tXLIEz\nKkkhXM4lHorCpXAAKXLGBrGpV1wuy7qpDgkpfYN6tJOE9LOCgCWSudb/2z5R\nyEnI\r\n=T23K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3vj2qMX99Fhw0q6hEGlLPcqylHOH9LI1kkeFeFLi/XAiEA8w16MMWkF5nP8A+ypc9kdSuLAg1qaGl2bISsMvggZN8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9bf47ffa.0_1587494243210_0.37812802578761673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c141801d5.0","@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/touch-target":"=6.0.0-canary.c141801d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HqwZUElFavSTqLGfq3sJeJMwViK0i2QQeVy2ajteY+LzHl5kx0FXltnVOwQNbQIfHDRfFKE4b8T+z05W4yTZwA==","shasum":"6b8344d00f361b2c9af0937e8ab7d0ec830623db","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GNCRA9TVsSAnZWagAAkNYP/RtW9e381Pe98DmucajN\n0LCSG+m+31s4HM4arO3NCbxM4kqvadsCw+Sd5OEntMDYYrozY1KjpdFAj/1t\nbmRXkUUVtWCAPXLUTJCLJ6ee+gzxKkjfYFob3GK/s9W+l+oMNrZy8TxtTLz8\nbQI5GLfznQiRfs8y8rPdOuC7jjCBSZqdEKY1VmFWu9YS4+9lU5sEebvtDXpe\nVpUHAsnUtSR5vjDeyj+ScXoTp/wAwPBvi94/mWho1n2npKhqksYc1WA3zpDk\nF3ISpamSIEOsQ2q6ei0u9XwTY/GJlTAHvyuNnUonf9nXnMAi49hp7V8EQ4zZ\ngjM4ACeY4qK2PeSVjrm2E/C/JsBwP3CDINzSHae7IqPxI7CbzjwOAA1DAWoG\nmKBf7pElpaAzz8UThfp74G1DVibCRNMSAPlf3lYJ+YasoEeOP6514jCH3j6G\nNJGM4bl+XbxC3vC1NwKOovvjSvEjmYHQF5I9pc8fi6jVYUE89giU1lo9WZV9\npqaMgy55Yb/Lc1WWJepqZs7CAtlUIeeW3K7yemNm1kfSgWKQ2nXfnZM4hqpc\nCjkXuFCnJkv4C0btBG6HtKcRNeC/CRIqxyXOQae0bAdIkCfxeKaqLZ0FoaKv\nrt8Xq57q+jmAr1FDibThA0oBQ6DVGc/8ohV/j6X8xegPUWveslz96/07gOD4\nTIAb\r\n=RksN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICG75rrdW4tNWyAdOFUtfuFrEANAWdw/PFEhMzrgXLMUAiB5Z/uv26xP1FcaLiJJQPX1HkaXN0zUTHjjoU+c79677g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.078dbd98.0_1587503501504_0.3269169301337109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c141801d5.0","@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/touch-target":"=6.0.0-canary.c141801d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W0MiA/iMMcSgPymi0lhDbpoDZdDeaC5BzydN6FAQNsWXh7hbvdH5HzvGJevT184CFs+A0dmR2i7HkTCoGGO9Dg==","shasum":"52a337347d76690d562f868578dc106732adcbe3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cOCRA9TVsSAnZWagAAyjoQAJhhMjEQu7XC5oEXRTUe\nI8TxQQb2lK6kzKQ2KHs/3TQ7WODCiGJlrys79IjXcm9cBfWsFFLC7coJmMIx\naFvp+7ZG9utCETUhqFSP5aW7L+CIxmIZV6rjih1FSBAYJF+tkHBHlB+B2CYp\nqKPWFTd5dvnNfSM3Hvbe7Zy/X0qFmK82mVO6/u0g3ucOGRgbXIoYO69PB3bt\n2D6mAh9ZeUsly+XK33wbuSOHDxcHUqMcqstNtVrn4rT5g8DafFtkdpc+t0BR\nAB1MAS0UABZA6Tix7MYesBJkXDT1BFR6AU2Swp/9aEmFu0JNt+wQ/oeD85e3\nOuEjKXsCKtPiiO6VSk8LnE/2KdhMmjl+AEMo2HmILH92fq8gLvqwxCdLrVpV\nZbnVcOGUVJWnJKTDV5U1T5wHfktK6RL33KieLGxJLzg49HatXHXDGmCxhJbE\nuqCt7OSBRygLhDjTd8SvAFb85yABOPOyoVRFWyEU6QqYRSUFy0rEQLb5xy6Z\nsiFUk0hmQpXM0YSl+Jirvd7wvvPu9P9mw/aX0vbHNw8aWuMxmL2bdg/OwWzD\n299HK4hgnNdTc4f+TjHBP+Wa9yyuAxaOLnt4GPQJeYhkqn8uMphUZywkbLDt\nahZ9SUgIGwKKSr5nViTOZ52dV1xnxpPMFA65svS4qcNcg650kMBNS/ATofjo\nEf7d\r\n=9T+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEojymeg5JQ63e27vwKP22MYgrBgeJSW7vcFrl4zQUG+AiEAoAoi3b05O9pW5rrW2Y2BK2fpBaEdXE2gBhhelinc2pI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.953015d6.0_1587504910153_0.037611155950138864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c141801d5.0","@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/touch-target":"=6.0.0-canary.c141801d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5We1v7tAzKUMGTh0Vfvl4ysgw0uvjrhrTHGMDJTRBMeJff4xCRGGIPKxHWqn2Ik9zlTqc6Q3TjktCzMp05IP7w==","shasum":"0656529c10783cdbbaf0b8f0cdb758d11729cb1d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yDCRA9TVsSAnZWagAASkUQAIFq2eFb5dBlJqD/sUZx\nS379wTFp3WMVUY0xVLrqlXcEoW8bmnuyFInsZ66JrP8H/iZDlCv9rbtVHvlB\nwktNpPVJUzbguryWhNfokWPiFOI5DK46f3Hd5XmIM4l/nMcyQuGEHIU2Z3oi\npq6ar5ogUIP1ci2LpjCN9XB/+ozmrwoe5VQjTC07tVNcFKPLtHqUn9gU3RV8\njmB/E3iqdQl0UC4S1BMr8yOacgObsZIxF8kAbrbGux1/TJuCXCz0VgjEf/Kl\nh7QJ2nYE6+aAsOa9Att079rrB1QxzJkgnxV6D2hhZDZbZdJUpzoL+GzaskTW\nV4Acn4/j+4oH5IvaywCC6+uVC/bNsJI+yvCaIi5tUjCYNnZKC66xnWbg+Nn7\nB4IJNeG1UxoZ55BuWSH44nezpY9L4eNwsSx6Q1riv3NyRE+GLw0zfFoTnB4W\n1GDcWblK3vFiaW5i6fas8lgDEYWeWa4KngM5HbVKx14lHJG71xirY+ZCaD8V\nwxAckzQqA80QjYCPKagZkLIrktPcZUdv911QLa/IaFzoNL8b1OJzXioctd1Z\n2qsmMD+ycWcUvAaoJIB9+P4Ezyv7IHaFnGCtrKtSK965B2vhr9qBXBYVnwo7\nJhSf2/OU78YqOiPBvaW47OdvzRidQICbjB06fM7JeQoe1NNSJ82WMktrKaBT\nWMRE\r\n=vZLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAXdJjTHxsiTNvBYZ2hi/amHd2G5YuN6ooq8S5MkbjofAiA/70dyYoBP2+GMHhbed5YDN9B8NPv1EfY1BFl3Dxz8aA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.c360ec63.0_1587506307063_0.600258057144095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.c141801d5.0","@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/touch-target":"=6.0.0-canary.c141801d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LqrAQDN2Fmx0wIVBjcjOOuAG7LEEFrtyGKcz1lhIqGC0rEs8GTBYutkvF/fdi1hyhCQFfqwFL92lcTJggkJt1Q==","shasum":"1908c347d0d6908d8a20d7d0a4edfe9af1a66d44","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WZCRA9TVsSAnZWagAAGFMP/R1fqOmA6b5fXsa7M5wl\nlofSSZN1UE5kLDysSTdYcUZXtXgD+Kq0ca2oVFzsToCJ2H0++2a7nSfyqy3c\nfka3bZ7d0XfUeYtuyi9DWvaniSw2wABbxkNOrJ36E4Ru84O84OLOaaArUBjl\nRqIiVJSr8bMIKl4tsxIANfAuBua5q7I0zvs8QdThiU2XO8UrImojdAOMUoBy\nEnuj9c1JDrxGF0D1pXrA06X3yJYLPO7mSnA5mZA14+Vchf2tmo8OoqjVLaMf\nKcTYnXWbt3nxiz9lJVp3zU+isJsO3spnzztlCK1ItoGzFKNlP7dYGcKO8+TH\nns4AZldkNi3qCShI6lpx/q0qYIINq6Q3hxwHqBmspXfHCZ2PEq9welkmFOuL\nb5TgGxxqP0vbTSxfgmYhjDzM2k98DeEYWXOoKoKMkm7hl3tWgQvYnhinwDVw\nbXANoS8fdsVMEcT/1yf0jYvtZHhTJ5EU3xPUJaaRXfOjcfHeTMKEzj4G4fOR\nWtjcMYZbjn+cK+tAEPxuzDMYvKaPk3CJ6mGRosfBIXK+U38kGzC/Erup3xTh\nyKq8C/RIGuz8CFO9VlA1Bkm45y6pmAqPyvRrbbef1P3QBMt7LmnckoDX1RD5\nsYp/Q49FaPJGFh7uh0MxopfLXkeW/hYJb3+f5ph3WhZLq3JgwPPUxIKvJAV1\nopHz\r\n=0g9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtcqRnIU94oG0Ix2f+bMJPqSUjVA+gvbHe5bRGq7ZDCAiBiXxVoTHkmcFtqiux+O1BLYC76iuoMC/nCh33DGFm6Zg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.d71b65aa.0_1587508633348_0.45877500806430316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.28d10a96e.0","@material/dom":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/touch-target":"=6.0.0-canary.28d10a96e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4DZOHegvcspBn/UpoOraGEXAC2sy0z90Jo/UVmKeRgGCJMHPFlspZrd5mhANo7vHU4Tp4oXnwqIqy7CK34P6cw==","shasum":"b92ffa83a087c654d411c13a1233b7c6f39be775","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOTqCRA9TVsSAnZWagAAkPMQAKArD1yMK34XjaBQBwYl\n29csLtLCbV1kQq00wREmUrkAbVmXnm/lvTBsXgmx7vukXtjd9WAV/rBUckut\nZAYAQSXWmHruN3woMxlFZdA9sXf19oP6FxZtpcxXsIttqeWDarflLopEM79D\n1wrgWJsfPbP+Yq6UjIB1p8UzLREWXIJKeHrJXMDj1EX1rkKXR+jmmKaOPiAA\nSqdjJx1mPM2Ej/WVbBPArxXK8qdFE13BNiiEn4dYAKExgEUtuhnCOkh1kQs0\nKzvk1QWAtEqweO1cvO2kYtj02KhfDUZiuWPwMDVRVYuMVGLEwHfZP3py66n2\nGfpT3QiRgAlPINA5Tytz/A5F+Zdj92kIDm9p1WNH2lfpmIkW2tE/qPCJ7SAF\ntjSzZIg/J7Z/6iSE0GiBJ2oTCeFbOTROJxLsyMRu3UNU1N/c1tS1IO/WAyFF\nG6bDVJKPLHQa9yZGrEC/qAbFTR1erF5aTJDK+Go+vQNrAI1sVQygvwTR1jgj\nizBRTgyGbqnca8+tlE4TbPEA7sesVTwpkosNuUuK1WDPfPe/596AGWB949Ms\nHcOi78AqQpzTp21rSu0/Ve1DTS3cqisSZO7okbuqR+lvdcmwZ2JPqrx4XEMD\nGGSlsUpQN7cZLyo7OKHjWrMpJLTrVMlhSkL0BLFdMyxQFhvqaz03r6zsO/7F\nCb7I\r\n=C8UT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1HYPzMgDF504InAUl40/7ZSpfnIB25vh17yJnnC7O9AiA+ICHJtgCeKIU6Yoey/5fugjVYN/bze9StSbkub/I4zg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.58d51135.0_1587602666195_0.5915345261669069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=6.0.0-canary.28d10a96e.0","@material/dom":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/touch-target":"=6.0.0-canary.28d10a96e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LNZ8Els+FoUGJxcAt4Lvl5YMV/sERoT3n7RJC6FcdE3vyJnz0/ipJbbAWgGZK1QOKOMThs/wHYBb80eGD5inLA==","shasum":"e9aede2ea5466440371ecda9e26fdff61e38e22d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodnYCRA9TVsSAnZWagAADHkP/iwpfl9VnAIPIaNKUtsl\nT8V5CI4NO7Y2m8oEuNa4a0WL+X9ylBB6kGCekqI6NRXBYLIzf7X2BBCBQ5Rm\ngpxf8eNWX1cBnEwm+lKBPdoN4J3CQ4T0Dhs9T6ukEG5r7HaNa/sXmz5gaTtq\nJUNb89+V15oTa/Xk+ZzPO93Xm05v8jV5T9BMiDOr6sWWEZoEZ1b0pN288oM7\nnxrcrbcxpGVZlzerKHl0yRzURJODJySIPOq6pysuxqwju07+HRSNZQ7OB83A\nhahLlCWdr4ohlrNoHL2igEin93bUEib07rFe6eT0Eq58ZyBMXkJbN56+wgKO\nihAvAb8E+ozS/4F4yKV8VVzl21//6HZEd3saYJNF8BTDPwqzwtQfCaSsJ1AI\n7355OD8EPvcQ6IAlafHZO4SpG0ZuSYgXciAsLvJwCVHaSRwVcq5TS9eZvzkW\nExHG6eT3F/rXtkIpXTaFzEqTXBy+X8meXqAXX1htDU8emUoD8WQY8ML6K+yY\nJ1PM9LgGO1qUfoogwhycrUs+OYF+RMEn1XiWFeYIKugqjxzEXofMb89SoeZL\nPHIwqb8nNiKFRY7/Lp6SKGul2iP2UBkUsF1iGZ5cVkxq5Stuy5QWeY1RdL+y\nOHKetazzX9btyw5ZycnhlnBP0LATq8k27BzMjlcawbpJ8n287kDzPmiHHIpQ\nsNKs\r\n=M6RJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjYmOi4gGxDGjc2r1u7gCLvLVmVfyNI41veIF86f527AiBau+PUN9iPEi8QFTq9WVsYz8oqafsg4O1mXVSgeZ/pOA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.d0af8ba3.0_1587665367770_0.49228609293661285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lqHgwILjMNm4hoWE03u2VCJfQ39K1vnMDTmQYvZiUCGHOCNNDZJquti7FpuH4oSgyySiP3Gwnx5CQvWCd53t4A==","shasum":"16b5cedd25d4ee1212e781365ac64d221c2e3ff8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1CCRA9TVsSAnZWagAAV2sP/1y5rvnR6FKMatOmxv/C\nus7qpMfXbPQ+Yt8uaUNQRNoDuStS5tSDoBIzzxzGrxUOdFJj2fKz8Z2+YtAY\nJx/lghEhGGvJrauQoPCXJIc6VXc5cc5dE2bLw9kLZVX/Gjxnm16uF13Zkdlk\nVX2RdJa2PxAxjRPHTG0ndz81mbmcY1Z9ufVCD0dKFRaRJkMszt3J0pSGrPq+\nkZejwN0qo6eewxrd1iwJNbvZ9syPMQc6G4rzgABgIqcOQnlvzBbW1pHU95LB\n5R+58TBVEtGzq1n2qy+q25to2f4wQHhryrXj76Pwl1SUmAoVftsnELZtBaB8\nUMwWzU0Fj6ykobLI7jLuwyTHvbu0Xx8kdyMGDYljqKLcp43eY3uGxNOGQZw0\nGivC0sIhbld5OgfFSWIS7U3SKDE9C+tvgfnhPqu1LIm6nrmJh4fkjvs4toRD\nP9Uuz6yl/m3vyVxl57rqqApeXwt31ZE0PhG65mcxsLQGJIdj7rgIevL72x4Q\n9sSdFZZb/gocCDz7bJQLjeh/VE7buqNsWavr01dH0U4o5yJygazr7HRJrvqf\nyOLQdzMQGcDfuLkYilHo2jLYTDMIwdHQDeZDul0Z+Gpb2lmraMdXpqokvMGZ\nLFyM4wNe3VwIMUkVyNedK9u6XKLjKX/yAUy9g2E5a4y7YwJnR0egEXYIBwYh\nXA14\r\n=FCII\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCEvc96jmHGFzst2zM6gr0BZ4z25pRsCd+h1tS5UUaFwIgd26XzGPGvpQrRO6u8TUnfdOmOl67GH9BFHpYCqVNyjc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.8872b17b.0_1587674433789_0.5989943333258252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0sEettFH9vXD7f82WXe0pRZR2lyOn5IleoG4Z6kIFLl+BLCO1GgcTYZc1VSLwA5WmHPPduIWDvwLWveF4YwmwQ==","shasum":"ce228e5667baa5292218901a865e610a4aa50c90","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvJCRA9TVsSAnZWagAApzEP/1JdeyO6uteeAAWaDS8K\nYjznA/MH0TH7B8l0khxguTH/S+yKcsF1swJd/dTA7fpFkKWgSdLQVVM/6ZU/\n0yVVjQrDTCkeQf86DZHEd6bTkoV7eekyap7TsDOY26uleyCuOf5iYPfkDQJ7\nl0RQhu0p968/X71g/Ih4WSX2a/2j85MPMTM1AnT+JRr+w19731qmQfV64Qup\n/0PbIm+z9ZCvoiVpLApPgtxUAtWy8AmngTn7EHhV5lDZiMz7xliSHJUwSOFk\nMxUqePES9lJQ9VWpizQ1NtTvAdH89PN2CWt5EHiv7R/uv7ojowWnPDjYf30b\nrSEVNtoQWUwxSvoYR8JQ6mpMBHCBoWDcWNviqADiIf/0h5QO7JentG2hWZc4\nRK3ce6Aur2wbk0YNdZnDjpEJvgzpQoZiWN6Wq2J9zX3DnmYa7nAeeEYb4xiC\niAiljdj8j6cZBGF2aksEVaxWTfAju9IfFAKi3kb8iXnQHDYm3f7F7hnV++01\nXQ/IhfVxzpCWADlTrskoVSGWzz/sWBNEUX2n0CixC8RRg+V5WWpem8mjFZpl\naBspcl/VfLgmgZ9YC0w+DDo7+aSoVlnV9KtFP22KhJGJ3X2gGkaC2qYtECce\nLAjKFBdxFV/flLQ430LJIkF2rCFh3GqH1gmIiT+IV5p2e7mw8XeLf+ypTu5u\nRk3a\r\n=YcMR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJSlbC/sWSMafmPgoBXCpBaymkmxiNETC5cN2HxxLP9AIhAKLNdM8TWxq1+AZDJBiuiszjMt+GkcSX4YOICPowcCen"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.eca1a610.0_1587678153027_0.8679918215877778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fI/y1mv9a+Bib/MeeItJbO5EyzlGVwuLPYWxjqDG/2noUHAtybGuQ4Zo/KyaQfHYhaOIZDnp8M++0GuTarOsKg==","shasum":"25a0fb6b48d86796dfe880aa6470439dc4decaf1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohofCRA9TVsSAnZWagAATAwQAJ2wLHfSfvwG6Omht/87\nC8q85Bm2LSXkEmh2APXfitGyAiwhIkqHtnDZb1DAVdrw+PKbb1OGjhpfEp4Y\nsOEWbNGgtvjKS4+JePXueTTsskfIjdNYgll34sFm8gblNQ/hoWeGCUR70CeF\nVtL4Kg7WcjIX5kPk3I+lr70PJLYjPh6glxf8Kr8Aq0zSar7/m64od0CSfmm0\nxJOzqd7pybac7P7k0iX3QCg/6ogpARdEUEl64QnbUbE8bJHfI6/uS76GLhht\nhsqut52wLZbNVqJonZutQiSEa5x/7QmM5U1sWvzV5VEeJ6dBnICCifG9bdh/\nP4U22EdESzVreCLADyYPjHNy/0XKr4PeDfYxHrkk3cqRCsTU6ND+676HFfMG\nyyUOuJTG60A9bpTJqBe+E9csRuB8jSUED61wcPJAlx+on1faKAIZcKE6gHie\nPgLO4bHwK7ZnaVfMR4IPXlaXA2wL79XNyU9UDuk1YnZBIP+PHTdNZ9k13rPz\nkjfM3Vg5BBzLMUrREIQ0gYw99KkxShwPJleXZ/c3xXO6VLW4nTca+1nbP2nf\nEguRG1FvnWXHJa9L6Hn0nNZqk4z8YNHZZxk7pFL54rVOdU2Rvm9PTv8vfwPZ\ny1hy+s6aSFKY5JzriBHEVMnej/jo29itWyYj1vYv9CQKgb9jYpysdKPG8Wpu\nVL3U\r\n=GcJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3wjwfqPMuSgqq3Bt7EX9d3bLQ6sELJJL15Uzp85rOBwIhAJZNiQSe9Ra7Xl7/OlMydULh718YZvTwXgLJ6nE7m5uB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.baaf529e.0_1587681823238_0.33670950665312005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SK7SBhNaNHVWJsyvEQsfi072abKA+CifKFIxvelkOPfuOZhgjS/cLqZacuy2nRbV+CeTDJ9YwcLS5zEJ/0/l4A==","shasum":"415b2be2e80016c8184b8fbac193fa6184f9be8b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiEkCRA9TVsSAnZWagAAdMcP/32o3vgDprqrRI7bATrW\nAYdoSxWJX27PKRt4W89yQMrYhUsRChoYyMr6GWRui/sOnkfsrnw8xQpJWwGl\nBFSCbCk1e6vQcdk/Xx1CcRi/0C2T3Itn5r+f/epdStnZK2kgyw5EfyHwl1KB\niSmcd+9MvAPAX3fvcWQETeewqdLc1GvoiwEOX0zl6rfu5vCc1n0Pvk3J0vW/\n2foGXpALDnSacE892tCSV3lZQsWlw33wiSSPMXVKuJjrjnGjoIXYzWvkSX72\ngvr8XwgcY1OMj2VQbTTg0QDgLLmnxDT03ctbVKLxosRpmRH2R3jj0pe10Nvo\nGY+aipzE2pGuYxeZoOCmOEpvYwFSc48CVwEHtWylYBLznfWSZC2afX15U++0\nytSgJ8jUn3zIOH6dng5XmbumZhCV0EvVtyNgBYsiP4LpTVRx4MFUtsv4Au72\nXgsmHTgg6RuOHHGLEnSV3Pqw3IBwTpA8Ad5Hp69IWs5EtJ20f1Lbu7zmIwto\nxPVKdTl0veFM2Z2nL7cmkpN7XnQMqNfYnhB5xsk1TzZdYrlAVyaB3RnxVsU8\n+04P9yfYWDygkQe1rrspAj3YL2OYO9myWHw6jl23j7UxbczHFLZeiseCoMoJ\nkc/O7P7CWeWcs/+s8zH/UVjMJAgI3wbBif6ovXP4rvVTnxE34m+ZgDiaB+je\nBkbY\r\n=ruCs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB0X73LgI1EKQivjr3UhfoPZz262xlhIF4BkP7ZEdDHQIga7kP2CIGjt2bxBQYLCR84fm++byh5u6jRwg3ErLaEbE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.7a7992a8.0_1587683620364_0.6147092404049987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-A1YIoIXAsGKwx2Utoyi8rsNSrcEZq+etqSKYrCl12MFpesv0gfRQmtHVrUpkUDOgpI+S4l+/rUmJZ2+TJZR6fw==","shasum":"3d5d1289f7ed234e475d13ce5af421f35cb8324b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBFCRA9TVsSAnZWagAA0H4P/RtLKnQCSa+q23r1KcJB\np0vexZdsjrP/EQ66sxqguHeW32OME99aae0NHoTdL/Tbe70u0h4dSPIGFktA\nFi2u4cl6g5a6lJ+9xg4zXfdoD9Y12B96qwTH9a9bXcG/Oc5oEwn026VfywwZ\nUhfTVc7TeApEj3yHubupIpbWbHoFzdownSHZ6RujCmZJRyNDgjQhtRCBL8fm\nC7rH1mqKzg4CCqo69l1FKG5oW/Sx+gOYj7zKGfnLt0cy9JLS4rykKzgpWU+A\noVXCZCfWoeNQ7dDibAHb5z1UoLnzsrgtqdCiItDo/qz2xxjYjXH0J+ylt1+L\nQKPoKPBS4m5YxXih5axNqkBmRJPGBl5xy0v8S3ghnQvI4/ScJndgKtEJPpnW\nZIb6CP30gKy+c7YbJAk1GnUAueIAaaiN6t4rdMBm5JOG5tQDA6Li85H2KNGV\nh/hzf4zD+ayLzC0lXcEi/J05HfR7E9AkSob40b+G17VTYgmcDtHq3TKmEloR\nMgf9Evgim40OpAS9zL1IFrXEOigfHT8m5x0nqqCoSpjBTu0UcOhNSCaDNmPU\n4KV3tx1Ui240DvZKIjHXFbd21t0xlNS9GC9DHAF0j8tSrXK+D9Hq9Vsygiao\nYAfveOalj2WYLSOKBsHVyP6KOBjIcDfT7rfz7R9flH78JopMfWumltiD13cx\ntvx8\r\n=h1zi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICw0dWAXlAbvepa20g+V9vEuT1JABIDmgDMY3k8cjK0JAiBRhHyvnzxXwNpteDYwN239eAAXR7XE7zXIzG15t9Cy0A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.1150d64d.0_1587687492827_0.9997782814604268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jXydcEQQyCPb7OUaXGzMirKCvhruBgCOe9hY1GuPl5j/auFUoEU4DiyMMX/MyyKzpyCtkY6sS5fCetB3UOzjiw==","shasum":"760c63f21a7e31992ab027a9125dd071869819c5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4dqCRA9TVsSAnZWagAAItQP/RIKSqJ7KKQneywGI342\nO9N/887q2PMk0/GHhJo+5ITjJfvVlC+uWe/3+pMU6d5lWvMTyXVurwClrpxh\nE+0jrjrTdrt9+h+w1ZjJiHEjtL02dHeeWYU0my5ZGTScwVIP+QI6d8jBy8S6\nlH0i8kFExRQHdO43awlPwz9xcoiLqvkIl+22bRMIcww9HOlfMcIZTjA8JAAX\nBmOWYlV8G+zMamp0naMOTjqQH2NIJ4+bCK5JQ9t7KHXuAhZBGAlMHnnvwLio\nxnAIYk+Qy1F4Ey00k5Uz+NwL7xFVFqoAGitj6j9pBtmRfXoga4MpOuf24pco\n1QKocl8LQU9Y2SVuEwsLAXBUJAXfNTuA90KyB92ftD3SQ/7TxsVfjqNlVOB3\nMQ5u25e4JV+JyuVk28H25EY7vVnQOwDBkv1YsCbXcKLzztqgOyNkF1jnyQQ6\nEZSMmPu6tmvpfSOFNOhBrq5IgPoQLv4Va0WQ3iW25W16bOmZX4HbnL0uMZ+f\n6q4EbIUMMWvaUS4Gxov07RncAnnavkFj45ffBoPjEtXwtO6kj3zWruUcaZxD\njWYqdhLr65khcquRWHkUMFnuyb/7M1Q6mgE0PAEv5u4rs0dUQSmMV8QPJZWc\nUtESYXegTKFugYpwcogbsEnN4CreccBGz7/Yzomi2DmRNtNsOr5qtsxtb9/0\nrKOe\r\n=eLqm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDss/y4vOMs4N+KtueMO84JnZMNKUJfwP2zVVjAV+4rhQIgRe4/YoNi1KPEK61g/B1bi4KYgU18e36aKdSE6Tf6um4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.dad3f828.0_1587775338154_0.09127564535075927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UR92Em73uy3MLHdFKaiMMscaywTJTII//lO6lyskiGHtWNKByv9kixMZ39uo3eoFn3zyoqypP6gHjJn57k9JIg==","shasum":"1a7afb3842e1a9b4f15af49e92647c52834fd335","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4LwCRA9TVsSAnZWagAAOScP/ihRsfCCppdG9ewsfyNz\naYz6S/vkjODspjFsCHRU0qoK9gjTL/LQ04iFIZH0aXrOC4tjTwSMqQRBbYfl\nYfFJ5W+F6Wz6T+4zeLIORr3w51SBuGuGArE8OMROg1zqyohazY12txIxofF1\nWiDbj7MrShd0uzh2Ugef0SGbVVo3um6wHMWNDMV6lvNh69gCfcs+HdqbiaLd\nRQAJWQKBdhlIOFN1B0wj8FMHrlBds6c10RghX/LwLdUaGh9hiYl9Kp58QyeY\nHlGWCP7UdleAEQ5TGvLIBwr33Fe3r2opBTlMbTsiyTS7pb7W4qwMLH0rejw9\nxexCpDvqC1t6xdWS4oqGO4pngjelDzSfudmBoRtbnMfdub04AFTGW6gIBAW3\nGcKI7iLNh9akcb6g360hLlZk+vPJMF7hsNVuMwoP5x3wFp4GrHNo5DI8rdym\nOB/47umpzcgLNS41VsgpWTXk4GH1Ll3hBBLQX+25z8Cgiuh6s1hqwX5KM8j5\nxxSurdDW4kCiFLCtiAdgO2pVPBJehjMvlImLybw/E51sIzWmAzXE36xMwwJN\nsGK0KHaszuLGsH7XEKyssbdF3vzBxFFFV3GeyjdhD1nSJsCDYqYbOz8yP680\n9+Q+NP4e/Xl49PNqTGzxZvG4N+zz0Ze37ZEfAnHAzQl3tm0TnZvE2rB43nrF\nmKrY\r\n=yyaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlEfBCX12ary4CQXT76uGee7vW9517rO+E3l/vg9C0LAIgeTMZukhN6Al3E54eKPZKnONRWDOzt1oi82vyr8lPzUk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.1bcdb47e.0_1588036336433_0.7782095563779172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8540808be.0","@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/touch-target":"=7.0.0-canary.8540808be.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dFywjoTNBhUS0hsgLmcnTwIwa9CJ1340c9/hdr0yYb+bpo+MdV5eM1IcNBBDgVRkJVrjKgraFD0Ili6+6IpcaA==","shasum":"bd5de34e317a0d385790b4664d7ab8069ad4c505","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5sTCRA9TVsSAnZWagAALYIP/jI0oOjN6imr1XenqbAY\ns4PjRNmDZG8p7tUbEWH0dtKVZt+1Vty8x2Z5pqyTONR2OzirJ712cBEe0vzw\nZrnkefaqYxLsZhESWq3vl6eIQv0EMs8oz0HHuZcz10UYk2m4oggP5+Z2W9u3\n9IA3CCPr9kvaK+u2aN8I3EMwx4KYuZaGJdNRqF6jvpOdGUZmxuqicpsuwBdU\nr7zKuSQrFynqekIY4O8gFsou3yqAetBIHn3BEZGhaTArve0M73QdGSMgbKN4\nl88ZAkItk3VQkH9zffSnBaC1ilJm4WZUeWr0FLd+2T+SqODK0ZfPJTv94x/Q\nRdw5wqyRLrL32iAKAJHC5PaRhZ9B8Wvzwepn58S6Yc/6TZyIFW/Dek3WJcJu\nQ1ZOr23L24tYxMI7CxTJjnOTunCV2RBnAwSI4GEChMdwedasifu4HLprba3v\n3xlMJYJ8cVtaqdDyAPSl2SsXIJbJ7joaDITbKiPaAta4Gz9S0nFujQRhu4/D\ngB6TbuoBPehPrGjnrT7Mvc6GtqRHmYo2LLAcauAZv8xCEvi/ZiooLoL+dTFH\nf4O/PiepNUitAq7tivsm/cSbkdGi68oN6c7OkRSyk0Fn3TZ5p/mofLqbGgwq\n4RqzpmWqUN1eEHMMiY4bruFWgTI2Zmg0BQwr45OHXNvEW40eIrRI1IPJI86d\nX6tS\r\n=Iw0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGr4eAVhj6qlU/k1xFOGje/uO0ep02oGkniVz457elvRAiACii36GAeV3cYP4tQOoWldtNt5f+XROQOThKRreShONw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.86ff1b9f.0_1588042515483_0.5484338283465722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.28d32f8e0.0","@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/touch-target":"=7.0.0-canary.28d32f8e0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-buceuHg8S8EHOuxtQQ/vLJMuA0Bo4az6DFlK8cL2LdN5hCCOWO6zCJUpRUwfvfrUR1c3RUGxDdyKscjuiEysJQ==","shasum":"cad1294f34ac841baed14c14c9208bb16364d69f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BLCRA9TVsSAnZWagAAZ4wP/RiNhmGQXbkcT67lS0iS\n579YZRezRZ6kaKCajweLO5pc5mC7aJ1cNSzMSgFMuNEZcIYr58OAggdMN4Zf\nFPGN5HweunUh2KFaH5TAun54X/ksEM/Wh6iQcwLccTAQtLOT4oTKv2DNPdc1\nGAPw0Ojz3UDnwdCgo0kYAzoboIYX6PbBN1UYKOllkAtIzHMcJ4veAukRHCZA\nqyiuUmX3TsiHEJxTuUWTHd8v/qFAu42iV4EB32lnSLg3j57xzApiMqP/FU2p\nOS1lN5Xp33srQS1zJFl3+d0Xnhtsv9PBSfwGUa2WnjIJBltLz68DfTpnRK7a\n7eTMfW3ke/7fP9DSWkW5ZUnzYFmB0wwN0itdfvHCaf02idKh3xReeXhUdm+O\nSlBrYuzHyHTrSZRTJUBkFnHTd3NWJ1JT5gTimWT6Q4W+MU7cGdYyMMnupuih\nQZIvdyGr5OOic70Bd5gDPvWMM9oZzxBoAwLPBaS6oKl7lnlz7JjtPzAi+f1y\n9Q5++BULIPEuWok1zmPMbp6pGmedvXu9gqpgWFh1Xd7fYlMXmwt0Ioucxqte\ntyNiUhspkIck4QkyQ+DQP6sDgGxPgGgl8gtsZuDLKAzfoKcmKY+q0l28AzRK\npHbVlm8sriThYx5P7LYrTvRFTHkwg+p2fHtUe1lOwtbE8tDV6e9i+ab/6Tr1\n311U\r\n=TuUR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGk5cqYyb49/d6Q5rd/ikozhLnspgIDnJS3dLZJ2sAGBAiEAqodmsEMXLNtKWSekJhfP7Qz82EupzzqjUEF5dLdNMcI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.54a86b20.0_1588043851311_0.9185470343068824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.28d32f8e0.0","@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/touch-target":"=7.0.0-canary.28d32f8e0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s8gx2No52s0RZIK76MkeIXZ48w1FR/8YjeLmr0l+a0UBOKsNI6LMKjFNhpZmJDF8C2MfGTt9Q3pyiDlyVMWnPw==","shasum":"64b3a2a1ac14506306ddf1cc933ec2e4069e3154","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilVCRA9TVsSAnZWagAAup0QAI/5MJ7Rid6HVjUiK8bL\nu0Oi7HI/aWqgKf1oyNvqkKEezPgqkQlYDLZSgLMMnpBFD1kJM52c/Wc0q/JL\nPUYmMhXUxpm9rNQDxLBGtzOqjm0Sa6y8719NIVkTDPUCp7AShbS/Y5qgFK+O\noC6zDaRoDIbRWxRoxhH3wAWUVnBEsSPXs4PIZ5+47cmttIhtUF1D5Eqy5CGh\nLAqFyHDq1+2F/TnZetGIdgs31iFiQI4oiu5B4DNm9GlmYTBgKDL9yuwwLWbo\nKCYfBz5mFcwpS0ZoW3XK4dY3fIa0cksTH0OTb4Y0xWgvFLl7vG5j4WNi7i1k\nUjQKsBGvZ1tXmMA8n8pwGHGp0cdlLmXYpQk+T/mD3/BCPCdA99pPSS5Oau0v\nP2r1mxnbCCXnjryKWDYmt5rk7zz0qb/Sse8htlcOAIQ1B5DWl1qvYaxXFp/L\nmb+vcXs8149Th6q4jnIvhIUZyfVMU1QqdNO6RVl+3FFrlJUfF5Ft4nCOk+jk\nrHY5JHLix8ASVoP3oU7aoPNpA+B5VUrFgqKLNIZjWu2Q6bqwcN17SwZOpfsg\nMXAJDsBlQTYK3S0+yTDYpd3l01/g0LNOvPTPUT8d15UTdotwOO6syx41mC07\nC5c7Jg1s7WuDKP2bm1qU2UfPN0yXzgwiSIWzJ+3Ioc/UGdMBUm8RnSk1mUru\nuXj9\r\n=ux9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvtX42UMpFsOz7Jp7iRCAtDUz9roGsoTtIGWfc3F3i9AiEAydufTDrnmRUrOX75lYy3Btlj9BbzG3f4HaJthw0NA/8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.938fd24b.0_1588210005441_0.8648186246771752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.28d32f8e0.0","@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/touch-target":"=7.0.0-canary.28d32f8e0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/saMtV0Ej0Z5SKcoMt/vNppyOfctLdaCVNjeR8q+yhCQne37rO9yn7RWpsGuTuwRVF2C880g+a3T0UNGlXBNDw==","shasum":"75c833d121980d32ac1f24e67d5fb227588162bd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQqCRA9TVsSAnZWagAAK6UP/2MjPdlQ4gS+SrYTaqbN\nzUQ4jkyEH+ahgGqAYKTafKN5G4Odnv5X5cryrL1BZyPhYHfmuRKybnww+0WP\nDrs7w3oeYnDL9a84AF7DM9LrC88h2XZRGKnM2/PcChVsFlnKHU35K+tiAoNp\nnBIFVrqn95d6wSS8+Uhd3YAe2Gt6lKumwgdV0CgWhRHZmaE1xsmjo0JJNQe1\nibaJ0i4Dt4hcRV4J8IrP458mxCLFY/pYKJb6cl03+g4g1dBoiBtgTUDSNUVS\nGSmU5pGd1i3451NLAVfFbPFCdpzUToQsOyTNNLDDcRJmOd0cahQ+Vjgo4GFm\nDB8Z4G55PdqDiDk+MFin6nQu2PSwmhdBThhUDybER6FWr/nyUWGM/Lk9tdZK\nm4JjvxjXA4rbNjnvpAS7/W73yarElAeEC4j0tGJtAu2e5xnN92r60EGPCSPL\nI0c+0Ldiq6BKIlRt0vKc4TEr2PFWRy40H7t9zVwmpqBOPq+fp2uD/a0brqxD\nzYASkohLvkuOvY/JulP401x5HxmYvtfpByhlFUDPjwkI1DjFA67kAClw+296\newsYG8qsk/f2pbzOTb3OlVCCk5cK/XomuOQBZnj5m3Z7htpVNUCJR3NHZ8Cr\n9qWkm4zoIRqPFT6lXJXRrA4hbaN/c7zDVv9a4tV12xK8RjBp/xe0DStoMCKo\n741w\r\n=VMt6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEwQsJvswi8jzxKGOyNTd78xJ7+uWM9CJeJhCre2/++AiEA4VMq1TmMzZrwWYRJEkyMkahwkMzsbeW54knb6rV61OQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.39e9a008.0_1588212777728_0.14374993858277163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.28d32f8e0.0","@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/touch-target":"=7.0.0-canary.28d32f8e0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EAqr8ObD4eI2EV5+kIKIGbzvDJ99gS45Yb6maGqbcdkLwnnnuYfZp+4nd7hBSk3fG0fZdea8aZ5BH5is4tH0bg==","shasum":"c67cddbfaec4ea55cc537dcf8665ea42b08bf8d0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovCCRA9TVsSAnZWagAAa3oP/2MNCA2lO5tMrWZPGh05\nb03t/OaIOf5IMhu8djnrDMzugM3dsR4gmOJ5nX93udK38LmdQO3fW/sxMiXd\nvTd3ZvoH0UXcrT8CCtmBl0ipnQjUKsoHuj+i3yK7+XZPmQZgOm3RNd6lO/l7\nE+x1U8DspLOds9aclA3/lLk42DuhMzuDW7yGemVTQ9XT5IQUglgvXYEY4ijY\nCoKokgdZgRONGmLKdM9t4CP22ZkPxkX4UEVfNSTwvzutrub9x2670jVx/2bO\n+AEthpFQo3bDolM1+F31UyKot+bDcg6KkCAi2o+alSG3obzE3iethJS/tl+M\nOVemHxW3c+iL/5iMWnObaThlT6RUmJxnv/o1eNgCKf8E+Ara9g9nStRtVMq1\nN9acq/kw/ereeX4FtpOiwAXR+GpKFVPV6QbOxufGJeM7z0j5AkS3wd/a6LaU\nSseyIKnlZEjcqWDO5qCRwpTAaCZduIbAgh5yapylr/xw940SA1WQXZoydxo4\nGN13bwpVdDL9YB9HCZ7GdgJry7JSwaR9Q2hlIGNV/mka49yKvIPY7OXityS8\n8qqHMlFBUhpztSvNLh1OsOyjXEPdc6EGyRm07Ei1UCAZgunFpJ37ymAjLU49\n7FXzp8RvKd0uZ9qG5d8ZK18CRx+9tOZkUJsL/OG5mRGzinAhLhVHHCU54Sv6\n4mB7\r\n=YlIn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdJ76FDtON9J/2ltlYb89m/bGvu/OQaLjLJezo3hn4OgIhAKiZ/4w9vOo4iSFQtZcgDGCiWbcudjQFnxT5CFvOi5uF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.f3b365de.0_1588235202569_0.4757374149447522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.b0f83d2fd.0","@material/dom":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/touch-target":"=7.0.0-canary.b0f83d2fd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3ivVeYjScvi+/oXaPOFUdmJfRo6A9dksgiCQqYFmH1EpvZmdYPCL02l7IgRfkAwhtYHH1tPKR1fJtsUmAX5Cbw==","shasum":"687723efd3467ae28ba7b1fe9a01ea9786df7f16","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nXCRA9TVsSAnZWagAA6i4P+wS8pF8v92SMW4oQtlVA\nWxF8kHSbIaX8IgOQ80vdD77Du77TnlR6tnyAwmpdRYAckORXBq/h+OLwZVmu\nyiSK23I0yRU5KaMyFt9Sj84cgOMsWzyitZq3Oeb+uJPVfnYbYnCd4W6N+tYU\nwj5CTc9PXeDq4h18FqpNH8m8lncbVIiSbgpvOyS5BTQM1S4xr/1VROYHvDOo\nwypAijjcEUe3T7/ggG0DGu/0v5xd1kE2wLxv9iM1qwtv4e89xE9TkIihE/iv\nJgGVyW7yD8mJEyQLle7LEJ6SDfbToWKNR3fsV7tyMUG1A44nmeCj6R9V2la1\nDOe21PyU6a9P+FGoWtB2avzjNVkRQM4LTFvrcUuLIgLaivytzmXMZYbJv3Qc\nM4e4QuxCi2vXaFxDMsn/G7P8EeLN4iLyCag/3B3PTKl/cVAotMMKZnIVktpZ\nQl5v+Tii6OEtRlk4p9LSjc3AJJx3aF0K9GDND0LxONsKPCNcZKFUB5D8BtVC\n31T70CoxwSKmjgxAVcKHtbz+BgoGx9JHidul8az6AdmVysV4tR1CLC4Z/kKc\nocPnuykX+2FDyr5GP77Wh3sjlt04a7WNrTD6y2U8I42PDInDc13ou1AiJT5M\nKEbiKlLosi2Tff349IxdAg437Ewm/vv0dRflKEiwyWtwrezb3hZu5lLyhybI\nYBU6\r\n=iyMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE3HMMzbdAjLMouARIM4ouGmDYGx+g+jXDsNAPTMyCnAiADjrybLjXNJASV20YjClzFIRv4Txx73oQTtojuHWVPfw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.cdbdf807.0_1588292055389_0.32072473940677715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.e59906a57.0","@material/dom":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/touch-target":"=7.0.0-canary.e59906a57.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rRMnQ5ACCWBcxC6JrhQtL3SnOwXmLUjRC/BA2DUM51n+6ObBDLo1TzOTxyp2VmFV67kkQb9ZeNs2TXTJKumwtA==","shasum":"faef2670311b5308200322be9545b48820e5191d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4SCRA9TVsSAnZWagAACGwP/1a2X+SKuLNNK74Oq+hs\n6+M7aEsC/tDT7maWlz+FLnu40pcLrGESAPboMNYR9NOnZCPjeRMkX26Ffj+N\nnq0aeQ9otfbN/kRh9BtGj6NjvXruZOIfjF9l7umf3fBVzGz5q/2mX/zER5tE\nq4YErKWFUTp+2fz42w/T9YJX9EbuoEkF4LfxbbRkhCZbEYWsupdJOE+vAAW1\neBJeoZXP1PhIv0LRI0p4Hj1BabbVMEuX8LYsstbDsuE4O4GGzciZB49XsaYv\nYpBbB04Y3cCUMaVgWqBg4zUQovY8FUBjLqnXsF6pZyHOwVASey6N7erf4Ekf\ncXmRdVqYSU+nnPIOZXB/jW30nkgp61u8ZWo/tYrX5ZDabVHDkAU4wivSOwbZ\nQgXTTYQtllkYUd+9l5/Y8DTeZBCmpuQiKcpjut8GUyqQ5beBv61JWIGWMuTx\nbulaWncYVddboSjcBwlhbHu4qdCvdqU/RP9WSCAlBQLJD8az1p8jmAWFRCzs\nkU12w8rLxF23HJyMQh68fY2UzhOfUJ3ZkWiI78/+IX5E3RTRvhPAM/SwYCVJ\nhCGWwLTy1685GdSxMBLB8iiaKwJYvHtHT1tyWZhfDGIgRp6jlia/5EHhp74y\nraa5spH2y9fvz4KMpcmQiQ0JI4alDfcsx7Z+1j761K1YlosLHZ7cC2pNGtNs\nslgL\r\n=jkKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5NRD5D0fgjUQyDB03rrCbAzdgcqV5cdLe5Ih3zOmyGgIhAN6KqtGa7Myfh2xAQmjIUAzMjCru24cR9VhlPGeLc7Of"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.9995ae17.0_1588358674355_0.8329844929219905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.15d65448e.0","@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/touch-target":"=7.0.0-canary.15d65448e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vh0IA18xnsVOjk8f+YqiyuchSkE5E8/7/dHizLf+pJsJ6TwbGb2o+j2xO29ltfiLWT8K4xatPSBuOBYHT6SMjA==","shasum":"400968317db0da550e169147d303fe62753de9a8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuPCRA9TVsSAnZWagAAqQIP/2NUuR+ERJSJlImsSNr6\nGYUjIRkOWnJp6hSNj6GMAgMuU5vB7/rdPeL4PowNyX94rGQQDxRsUUWNHUc2\nuZbWD/GFU4HlLjHlnlhm69U6SAp+fWETFSEEEmApnx3h8kbgzMnKn0WbuNoN\nf0qdWcJ4kHTytrky8TOG5nHeJh8vTi/GZPfVmA1jt13o7TzaBYahe8wq5Vrj\npYAQwLkrljydYFMda/iwsMfC5Tj6CJCqx74+y5LUPvLpRCEiJWxmIH+652DJ\nPSxNcUok19X6XSvWO7Q5YK1BXpJtCBO5t+fmkuCdpqIIB6JQvxAAm2PSR5R+\nSlusMhfvZWb/TkilBkKQJSwMbnlRRnuWDldwQlq5kAtX7tkgOgFEEqCCuZq0\n4dgmQdUkX80DM2vq4FYGlTmrMNSjWNNLzkgpflKe5EO45K9uKzmyChHKdRw3\njTbdgDHzH2B5f7C1XcfE/XeSymKT35EIFAogi58Rrf1iIWrny0J8tUQ6C+uy\nKrLsa+2TBf8QYZX3fS/hOF5wh4hSIMPoxiuPnbrs0H8EFkr60EWvBEHfa/hJ\nPCpilhUZ6Oj52POOooHEApGRxgwRzeDc7zxGrosJ16IwcxQq4t/X90+Q4D3w\nrOF3pe8dUrH+hRhlJiV3dnI1BrmKx+R0vq16NJIF3c1hqOYSP43gJ1IQcCrd\nY02f\r\n=jZE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJE3KgCGJyQnCsYIsjtRNSxCrlkEVC7t0GPqLRBF8rOQIhAISZtFDpq64Z5Kpj3xotczqpzmNWZNsXp7lwGwIUjBSp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.457bf035.0_1588366223012_0.22992503657557384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.15d65448e.0","@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/touch-target":"=7.0.0-canary.15d65448e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+jhIDVB5DZb3mCtXFH/RUOQZJGMe1LxzRN2VPysdjc5vh7rV0+iuxC9A+bnlyg2l9mGTcbnTZeDf4vud+fE4jg==","shasum":"1c5e0464e8035fcd97c5b1deafde812832f3f1cf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJOqCRA9TVsSAnZWagAAi5EQAKCLNezTwABEKJTmi8hn\nHX3B6ZVl17UUrT1Vijglz0z8/9MVT+z8dh2h7pcDXE4M6RC4D1mqPrJoniad\nZjY4kwJQ/YDgjvKn7qN9hlaeC/KZHNxl77Asro/ARqaNGWlI7/WpYs/lsP1w\nk9A5ZA9v6jRf0DXVsfED67nuHhNjeRdnTufJF9ow8/TSlq/553Ne3H3+dJru\nY2OTkDyJ/TML66GxmCD3ePV9kGg/yS+/XmJI5ndoO5RtGsY2TrczgevXdRAv\nUp0I7YK8hzIwD58+Fsq/VbJQkKVpaOXE31xugGmX+Mz5f2GI+OmqIITu1JDW\nA1ESAcxk47IqfkZebNo1zP+3b5OYQeXCtuV/8Q0cr1BISHXyv76/dVBhYsUm\ndr6pL05nDKEOL2Cp2iRypZRkzho3dt5A8pESBdtq0le+UX7IKbunwAd1EMaL\nsVbkZgEMzKQPDALdZTpT4pIGlgAB0ITiWertlLwufPcORI6lloPX+WsJ5ftJ\nM50G9DZBum/If9hmebzwuDY7WUb9GuqyX8YfGszRbzFpQ+7ibN6/hfwlF9i6\nBp6abHjvZJg3gMwtANOuWkKnxOLCC/HFXw8JKd10SAH1ODbOak1/KXGx5XlM\ndRAbc879vis316w7LmBdmfkF58B2F40bL/nK58fpND9GEjWWMc1klTKQmV2l\nbPI8\r\n=wHJi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChKPhdrKjzu4w7gNivniD4A9ccMbpTHsGxBN6465qV/wIgBefCQRFAsZ3ydHM70NibqENOtTfcaEcOQCsug4MIfJs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.2381fd02.0_1588368297657_0.18656588325603263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.15d65448e.0","@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/touch-target":"=7.0.0-canary.15d65448e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BwLXkiIzMkmq5xvJ4P3kYMSOw/kcvKCY+CqzVUMwiOe2pWlOE90HWkoJL2e+/0WslHe603gLvFfnfmVxgu78mg==","shasum":"9154999b156d843e4ee4b31e5e9caa506c062c07","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJYbCRA9TVsSAnZWagAAHVIQAJlwxj+x5a2XtIQDUhka\nrt2fT3eDmejyVxTQKzubSg0t0gBTfHpvD9zZd4grkr+9YMLZqkEOu5QvXIzG\nAZmONROqyzafztZh2tjpZsMWnfUK040GJijdNW1eH0Aoj2+tbVOHpcUS0RyE\ncrlNfa4hemz/HILoBCc2kIlwSJLK+lrtMmt7wewAFZMTN+xCLxzARbxMx8nn\nJlH42kBV6zkp88RJtmEXEr8hJzuipkdzODKaEEQjmWc275HF0eBFBdeTGR+Y\nw0w3nFDEOV3I53qSaagOZO3J+LMquWZrPuGtFeVJG9lbjEQF8oXGcIBn0PQa\nH1TSAZjucnkeHV5HWHaTpw5/8kfGTBLSIfRcHqvSHT5hyL7Zf5SMGHxLvc+S\nJahCKkBX2E/lTOUGvxhvCb+mHvd7lkIdnZRBKs8vpfgsj+EDB6V0jbziiAZv\nL5uz3iKW/nXi+dM+HoAYUqa+cL5qSLSPr4yCEHDhpyOnYUG7Rfx7wXh43ago\nT3dgPOY3zWUV0kqdBIqjxjBG+9qoVMV6DRgzttk8vkPE6qJ6UcRHQt2dX3Cv\n/HJFhaxpm/7AvX1FYXjjgbm87Zsfg6itZhwEB9wF49cYq3zylVVPhm6yCS+g\n10UbKL+/J0jXEMIhfCYwqjQKKFvIPgr1BgRiNykRUe3nxw3tCM/fyVFXD3Zg\nXclR\r\n=LnRT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGI6PDeTy/CBQEkLSSawsbT5FptFo9yS98OukqYVRKOJAiEA1vYN9DcsnwF64wthbUe0/2IbZMVsmIAu8K+JMoF9hWo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.b2ca9b57.0_1588368923340_0.30777652921932086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.15d65448e.0","@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/touch-target":"=7.0.0-canary.15d65448e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GDmipXRc5kG+i0rVELbCJwuwBf5s4k9eihFnbLaR+zRNKRov7EB3UspPPd2baPIX9RtnQbViLHxlWF1k+t9FpQ==","shasum":"42f128638fff9335fd4e57103164ad03a94dc719","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKOjCRA9TVsSAnZWagAAmbYP/iQfJ8kK5oabV55KFTgS\niTzVDR+azwHWruZ9K7G4YOFO55PQaQI5T13R+pBUL8kRpDRU+PzJR9uF6Wve\nAh5JCLLfxezVC+U/tzWrH66Ymet7KXunojCslSxixGyjLJi0vyexRySNEQj6\n9rOSBkGLbGjQJBeAsoEoE0wCJqy6DRETFW3XxQHx7oMGHlOlcQSvLEnMBuaA\n/DRET3Hwte7tfyeiU5e5HSE4r9DI+6jVIz141hQ09Pc0citNqisPve8hFRyt\nEOEDSELr0XEFTBmxynAwUvEQ6c25vqRVJD7XWhLa8HmFJ+8itdOClrLBvLyk\nQLE9GT7RZqIHSvt8DPzFqcrEc288xqIXYLAMxZof4xc1VGDBRiQd5H7DsNV5\nyBpUpHDOnJLzfXNztyRggyqJb9l07BMdHXOxXLKnphDPZWskIcNVF5Y1AjK6\nFDQstZo4Q8vysYHF/IDijrjtmpj07LHQsBqlGSoToxH6+cAjo2d8JqhEIDV0\n67ZDYLCfzFDvehGJznL6xDZfer32/cgtsYNGm7Q5d/i5e1M2a3XLJ6EBaS3Y\n1ZE4jjrK6aRG/1fePHaqf2AdjwxzsSVkQgBZm5aOb22qywLN7aUOxDDmrCsM\nuOAKacS7gnteRKQJzSZ45ZxdJIHdoDgQrgvQJ2G4fuifCBGr+4o62KbVuefN\nbb9j\r\n=49go\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/2yG+7TpiHCaVzBCy0p0VxCTxmB6rChxx3qr078jg9wIhAKlWAtlI0X2JXG6YfhYf7PLfHCifkJPR8FygYy8eMGh2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.b2b088e7.0_1588372386666_0.8952717622709354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.142b1549e.0","@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/touch-target":"=7.0.0-canary.142b1549e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/OCvspgvKmwfDI3gl1ztQfS6xMFaeYaKfga/mwmD0PfGu2QpGp/jH6Pr2ynYi6Jzgzx4W23NPJxrEo99RB0L3w==","shasum":"9f4b8b7b5a677e574078b0119540f12049789bca","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvDCRA9TVsSAnZWagAAvZYP/3iz4gGvJkijclJICat2\ngEAG5/qXkGbxTU7g15/l2XgZGUYxhtZoozr+HeD2DpJ85yHlbB5hPe/L3vK9\nHUlCayOp/Bd2W96lNk21E2ZE/IZ2wCRswbbNm17938mtk+IiyjDzGG8y3+nO\n+R0SVQOpkw0YEG8vkegn7fznueptmCsTV4UxqK0K5CvbpqgbRkjfSN/Eix+X\nTSA8GPW7W5878og4KX3tJmLfxNUOtRDgemsiPuQMwpnwSRGD3qbXPdWofWv2\nJ14K7vkj9Fi4TCSgwhnCXHwctUWiGSeRhnS7gLvl/ZqHH9rDsIVu37Nn9VgR\n3tpi6f7MD+/LZn7PB16BgB3gEod0gNyAFuThDbHykAwkwkbBBud3htsw6JYS\nn00+MkerBUzBugf5N1U02cWX1HRzbZJHA+m7UgLQqY1BAYn4GqhAYYo9sQIZ\nX2UABvWiI9nlts1b+yN0h5GschM7o3PiyDjRQf/L32eNimLBRfOHKL30vIZG\njzjHvv8kkRbU4LCaXiaqTHIgXJwaNOFmlHus7e4390fL+y8jruSqNMQyI+pD\nAX+Suisa5lcSLaLNINYJdVTtDtW/wRbvSRbVxh5pQnjaFln9z7+6lSObTUvg\nlhPFQnAQ/pT5uNNp7Cy5V4Tq51WGNkX+uP7nzHwoesSzDvdMh1pgWO/6+BdV\n2/fm\r\n=x2wh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL2GdQqDgZov2H2B09oZL4qxIwwHzCHUuL5FhbCBmQxQIhAK2sL6VuXNW6FDkyXF42f/oxX28sp9R0eiUz0W/Q63N0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.fdd8f69e.0_1588378563315_0.2396007611854276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.142b1549e.0","@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/touch-target":"=7.0.0-canary.142b1549e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DbC54HGsSbaGlJDmkxj/V3oq3rRvJnOg41t3DaSK58KLxISXcXNRw7iXbswSjnoL3JUpbJsU10PvJ0s+Zuze6A==","shasum":"68d27c4d96de2d87d9dc600d4e3feb008be24271","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery0rCRA9TVsSAnZWagAAAgAP/3h8+08Y6vU5v9SjQi+P\nndh4ke+122xP7hy0unMYUw2sq7L3DOoQ1fz/MQlcPNafun6KgOOeLlHtwVHb\nUqY6RTlsXsNfATNwQLHRQ7j9J8OG2U8/3QhRT7SURU/ltP04c5I1iQHdMUGL\nriBsfHYecEsX0JJZjC0e2dJYkI7hzhIKmJXth7ZSScnHlWbSY1+n7B4y4uJF\nphqDsrPW0YlvmE6hXPpbkjHpn0YJVNIyh6abh38oJaVn2xKpXrt8vX3WhEaI\nliGOVn11Z3jRT2jyDWoBuYOVZ0Q+Ea/gva3mc4+KWbuVIQ+SIfApE/g5aXjo\nBWRNDtdhVh2L33nRq6kP+0paEGe3EKwhhS3IpNpyLn9pOIhYuWMOEudvlLgy\n31BgNJT7HHaHqYISvbSp1mHUsnK10UBzs9S2DmqYawsQrVyR8YsrvM10ZtNP\nLB1mSjdwLWBPwTJ8nspurkzT1V8jEMZmz0Do96kp06NFW0RmXBm22h5yQ3xv\nGt2Dj+xmNd43mZHN8vDZocXA5NhNYgv5z1vR6EvxfbC6k6QPj4uYiUuHP48L\nQUKn1m/+cIlUz1uQuPTnAkf6O7aVJH05pVKmdlQ5X6IjqaJfdxxf3n5vjjWM\naq147OH98kZyxcWUG5lSZfmKCzG4Go1sd6Q0xuzLHLPy7N677FDUQtKlW26K\nJthK\r\n=3ma0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHy8Z65O/pSdfJGa0s1PYi+FkzO5WDtDVlBtwKC8O+9AIhALUevc9Y3kc1+IFVrQiGiLEzJKm1Ky3obpfWFCTt0YtY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.730f45a8.0_1588538667374_0.7557156704898524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.142b1549e.0","@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/touch-target":"=7.0.0-canary.142b1549e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OKt3RAQdKoTWc2H+IseNKmXovzF+kRNhZy3GRdmsCp4MauZHmYIz/tGmZZ34MqwtO+zp+lfYMM2gl5obfmpx/A==","shasum":"116d4c640d51287d7632df2b43e78a113eabfa01","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXQCRA9TVsSAnZWagAA7c8P/jNHK90C0ZV6Fp4hjpOp\nILb8dmdRDSIhHmmTvhvPZ1MQx0OqWOw3f4JJzYwycSTphdTYYPiZYQc3I3BF\nXXGfnqopScYGlvc9a0V3f/CLRyMCjDd8Ngth1XWoHz/6RqAiRuBAfaQv5IP+\nb8JhghLb6W2L4si9iuprShFyP4GaK85TblBGQcSoXiv/hEgujypjMkgeFTeE\nAdQZQX0NSm5eZOxbLAISeS2GNoRL3Cwgattl3sJFhSwU55E2vIa2ht6dsyQ/\nKGspATOXmG/KBrwysZwAb6k/fYMCDQWY9CwqyZlHPEt+DclTeW2WfdNiTrSU\nYXp/Q5kIXHD/OxWQDq/XfJLBG3uPl9dl85Vd/Xmf9bpRgc8Ss82rhVKzt3gs\n2CLb4TxbYwaHxb8sZCDGBhLtNA4JZiPZzxpXJPLgXEk7C+fco4RB1Im5ocIE\nsT3II0xmHFlUqL0UaaeCGGMwf3t+o5v//Q5rcH+XmPNq+zNrMYKDkhQOE7gS\nAi8ThAxRngy9EIXcVDu95qFe8/WtIkcyHeu5/Mu11yC0vtJpSMDZEI3MH3zl\nnoqFgcC03X3DyOA3TRRHITfIQ7eOK921kREEMmbIUyC7BwxA9J0BBVk6iFNY\nhENt4rqSszdOZbgXGjzkaakr3w7L0lA4WBzmU8odUsmrj0e9SIw+dx2f0wY1\ncALB\r\n=FH6e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVwuvjYowEBsclXlCKrqFbUWi/hbCyGOZJIiU+hdPkIAIhAKBRfL5ykq1k2MfAhmh+/K1KxHz1C9Ggjukrv6xJussS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.4219bd20.0_1588635087795_0.4430246841077574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.03dec929e.0","@material/dom":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/touch-target":"=7.0.0-canary.03dec929e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6p6MWrl3L8xoO0if4jU8F6vVRIqUpo3TwQIvDwHyoV0XUvkySINmEZtp/AqmFcmwb8OtY/0zSw2tJcyEArMSRg==","shasum":"72cfba65bc489c72140163f5dabd5546d9d7ba83","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5MCRA9TVsSAnZWagAAS9wQAKD6YFGo6ABLDo5z2Nmo\n7CbJKsptn5TJUzCTvz99n1xegYBYNYpSVB8QUEBMO9dWBWLlHvdM4Bqowwr3\n9MM3AkHMG5bnVJSPfi3gcMVCI+SCKyZOmVh09AmIr7V3IfOG8enGwHg4GqyU\nz2BEANCTBP783hh9RZKzLDZYla7KiahAxMnKGU7WlnTLg5H25jgIdV7JsH4B\nu7HONKpeESQe/AaGZj4+yCp+SeBZCGSllWcEYGz59RwWE7Ppq3FOv7kmpnSz\nHWSuhIpBq0sGgDs3VYfSdzSx56erjdlXTVFgf3WB+FyDBV2lGn6Kq1CnI59a\n93OFi768ZwC5BQ2KIbJE5jJ+2nladIuY9dog/TnoD6glA0j5cN5+V8MA39DY\nqNAm4jQBEnTNc1zp8qiSS3ciiWjhBCmlHPdPmzGGeNebGLWrbS1sAZDJyIXq\nW/PEURxr3p6aTvbHUToawlQkSVgDB/yKs66Ey7wWXt8t01TLnoKOC1kxHGD0\nCslKvtls5uAu9QSUtCICuce2m59/gOL6gFViU/7ZN/nanAGm0C6Cb7CGg8vd\ndnQ5FtuFNWY7wWbDNuw4VZVe8JRZR5rklCPZT2VgKg6hRLFsf7QRf1pijONF\nM02ipIQ311Huz3Bua66Ae2VuvA7HWf214KHCTsZlh3+Xo8Tc0ELQemkqhi3J\ngkqm\r\n=QO82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQrJZmZIalRXiCE/mbDv7O3V+bRjp0geegqfgwjZsxjAiA3tAt48bD9+Ww3dPFjN1QTBL35Vu7YqKkWkzQsO/klqw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.1d83cf6d.0_1588698699976_0.4667924833014394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-dialog","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d92d8c93e.0","@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/touch-target":"=7.0.0-canary.d92d8c93e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zLI2A8ctdS5sV5BV+kKnJVHxL9Huea2VfvOOgDvpbR1yoXG+Joe5GD1rcPooN2ufZoVHfhq/xFmHGPd90Gf60A==","shasum":"778621b54cd2ee45ccaedb9eca2896366d2f8a95","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":114181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesay5CRA9TVsSAnZWagAArVcP/1POIKF+Nb/CorJvJQDH\nv+6+AYCC0k+WCcvTuJndfb9GG4Yn09bGY9XVlksCGRxTJovTfUw1iBZ6yuBC\nTWL7V2drHuEDBhtFZ8NvsEhHhIn8G1ojoGaFx20pd1NiipwtR6BEBAnW9G+f\nUQ9EjEVXJ6z0jyd7ySGJ8Tsz+xk9Ykiag29zOOVFST0wVH+OTRLYB7H18Ob6\nU9EovjS9ra5+ObRX90gnmeOlP7TUUfRDApDy8IwFrLLUdMqqbLJalg4HC7BS\nO/sDLJ4Eo8e8VcRtXnQrWUwcdZXlWJj8lRQe9bCl9b+YJV87dA/pL4TMEZeY\nBazq/OP4DUrHJXLoo6aKwrkFb5BxHGeS6PvCMvRQbQZsbV6lQ94OxPOkPod9\nNZUU+rOuWNv9jEDosWrGQKl9ijG/vA4KBItFUcBHe4eZVN+eQov2bvAlpB/R\nGzkT7VdGBEAJN/7qEadcv+n3yrigxQoDhqs6zj/KXnx1uiGly3TI6I03TMBk\nHEQua5HbisBxmFahlpqwYxqbbTp5oP53+wE1UREdOmqqJctw3qbYJp+yF9Xa\nl1cd5R7mD5Ktdm5IrZ5ij/KK9FfSZUsrcexgYwlQ25JD5wGBOPfKgUN0EHYH\nYl8UtwRW1oxXhSUU1dqLicPnowwkm3aKIXhbAe+5ezQVN0+y3HKKtk6lJjqa\n15JY\r\n=cWh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdpE9Yqc1j5VB0XydFu5G4jhWv5b1fvugADXU4lmNcwAIhALj+pibjZiGNTHm61P1VH0wTeSHFl5XCL7kDYWL6Wz+0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0-canary.3bfc63aa.0_1588702393141_0.9831840499711373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-dialog","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d92d8c93e.0","@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/touch-target":"=7.0.0-canary.d92d8c93e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-3zIu0gVJyAAeKW/57/+4tsgaVKPUvo33ciZ8oDzGvOdbnkZIyWwylx6ydnPCuWED9BkQekAgH7YM+vzutP0UhQ==","shasum":"1b5266123ee4eac2274d9410ef7eadb354d27008","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.15.0.tgz","fileCount":16,"unpackedSize":114146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepUCRA9TVsSAnZWagAAInUP/24DONyWauHIu9Nqch7n\nJeLUwC6SGFpYclyca85wPAY0HRRZk25bBBXqqRLHTSiPwKRtxpW9qVdJuYrc\nLNKiCKw8RiDhRn59nibb8CRAQTdbdxuqyXijN88xW71B8HWaMuOdbQPI2CCh\nffzPgXx4ZQVVwiq/NQ7zDParYcXo5iSVDAzAsgXoJoyG4an3MXiQJjUwLCkw\nNFXyQqQGfEJg24C6Ez8VD62JNrdFR17pw5WLQgB1HmI7sVtCiIDmMWs5yfEf\n/9aAhPP8yZtwg/2upzTruGh+h3HpgwZ7YZiMlv3cwPepZIPTfvfh0jg6asp9\nW0voqMs47+8ryQi22XP/3iZuE5esoW6wNte5l4lRggYbWbkkqF6IGDuypg27\ntzRoxapAw9R8/7JfvLJF4mENYSbyx5Pej69qrn9MvifCyV2OweioPTev5TsK\nmpROz9Hxz4vTas90HfApmTTAq2WtJ2reYLw5XppxMytjy3/UpaMeaJB2LyA/\nbIxNBsZkghNSKuwU1qAlcV8Hs2581WoVp7BBVV6cpN8GWFO2+cSnR2/0xvtd\nqh9r8SvjKpN0H/IZAag9WLeLFnWnFOgdsaCuDYs7hr5ximO/B+eDoX0f4kyv\njG1EAi9/6unW6OCp8FlNfIiyyvpVg8rMhRKgzpeV0mVUVLHE9vW65U9EDCcQ\nj32N\r\n=z+Nw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEejI5KLYi7MiUYdvxLKP8d6KVU9LZcCRcnSkO+vUzEvAiEArA7uAayHPnS6aZejSKmWp9ugQHvDTskk+d3tKvafrBw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.15.0_1588718163943_0.16101420476524742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8135cc085.0","@material/dom":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/touch-target":"=7.0.0-canary.8135cc085.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q9aWcRdARas0mK0MyNJC7Ql8Th992KtQpZFzMRvwcXGW/jrEwLXGYfWxYLhoTD2myNMZ1q9n7uAgp2gK4mnIRg==","shasum":"7291b1f8f791b1685e5d8ced281db8d08e2adf6b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":114238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszROCRA9TVsSAnZWagAA3XwP/iZHLyNyxmyfjzvNSajA\nWlcfGzDVtcaFnel8qdGy/xfCO6TGJLuGElDJM9IMu5NY1YXF0FF2Bih+IhvQ\ni6T69zLst9y/h6Nhw1JRgKAJ3HqtEciDr3ZUeE5owYnZtJTAWjdem4pKjwcL\n5sUWt1VcJjNaifMo/JmEBsefT0u3hbgNWfBtEbtMkLMbsTzujwAOQzdBsA4E\nTS4NRCTwHSZWh4LF2heMhQ03VFF4XFmIHVxyvyrDwnKBLqxXGqV94ZCwPY6s\nhzTOjLzclv0tkAkSBldUEAmkOxdQ/jME3QmO8Z56R/izvCYZgHtFNNoj0rr/\nVhfmRB+s5vtZ/nu7v542fSkZqdCWQJVnZGSWi3Dp95xJlza/oUO4deaQA/ij\nQirP/+WTEuxY14Lm3V0cVKY+PKGNeRcEQOT9MvKkZxRRsdZJirZ91RJbffx6\nWIe9/1WUUnpHmYdgedflLIhTmpGAp7yuMbJcalRE71XZnxjbJ+fL35S1BQAT\n/ZWGO0B3MARdxSa18MC17FD7vwy/YQk7VEV3nQvQXuNw6qdHwyHqjKPJ9QYG\n6UByuygYlK6YM0+2GXagYoTfQS/99t3VzLv2BLiSZS1FqpLzhnL4RH2tiGcP\nIBpnXMw8ECvE+J+aoT7IXtbUQuYIpKe5VrU1cK6mkJL7ZXD8Uj+za26vFaR0\n234l\r\n=SBxR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHkWs5jv6xbknHy1yrJGRTkpJ0MHtxOoyO2vHPyYvxYAiEA4fhRX/ALykmmJVZFu3gN0d+aa6ma4Dwvii0ghPrON54="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.1f4e3d1c.0_1588802637362_0.5300020397653156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f83e00898.0","@material/dom":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/touch-target":"=7.0.0-canary.f83e00898.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rRXhXyBcOdKyTm44LFBmDKhlSDj28sa+FtFhJ2UMmcQgVFkCqca062bLZ7SlWUlunsKRLOkKlUxJOy7H9KBdcQ==","shasum":"cf1818682d60b7bcbe9d35ff10ae5d3c5e9f7a2d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":114238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZGCRA9TVsSAnZWagAA/4cQAKOV2782wMHMb8DK33CU\nMGOk4PLPgdXpU7K/8pFL5F/cf4O/hpkq3x6Z2l900LSQNPWCovby8UMXkJes\nJks1sGujOCz2RP4HUP3F+2v9DHSNAMVX3JyBcJ2YAFZYm8iz9XYE3/HpQWn+\ncLvpm2p8w4R47suAKxiHqWgtIAEduI6QG2iuIds1XZkYFoSvu8oi1l6g3EJi\nmsJcB2yxA98fTbsioIf7vJNijhcQt4caJ+hJGy6xDtHU1L3NVT++TOQ6/fLl\neHL6mc6x2vIJU4QETlmqobwM2wOM7vnjoq9Evagl0Zs18KDdMMvIopJiJCXt\ny/JqYzhlCo+Sc2cIUjhG1EGmTOVDWuhGkwASRQfSBY2XlA+cVb73U/4nAKjz\n1O5Wtao5lTbrJh996ToBtETlATJJgDSZJ1Z3QvdTvQGGxsACbAl3mZ6OUCYQ\n9O3j+dWIbmc12jHKhZF0cgOCGW2cXkwrYJVGHBzFxYoStS1C2AJj6N9bM+V4\nK5FBMM1K3qYKVzO3TH6rtEmSa3wtfz5Yk2sjOz8E0TzSPfWdlMgkBq483Yxa\n86E1TqaaVU0OzvgQ1Bgv8e6rFvg6w9rBnQIFBmtozXjDCmH+VGGjn+ofgqpf\nSrcPZbrFG3NjPqzAGmGnuxlxlYyPqNCJO6lWzMv/Nx7IMXym70prZjh5fvzk\nQ9qH\r\n=UZRu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/jVzWOveGqh8LbEM3gk0HltaQZdqhHlHBVbmt3jveDwIhAPBpyeURMAct6AEjeeVT5eB0p71J0IBrlAhSlmOAo8dj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.bc8759d5.0_1588893253941_0.9132306476859664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f83e00898.0","@material/dom":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/touch-target":"=7.0.0-canary.f83e00898.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6GUXEpngubYCP9jT39gW1RQYajRLUtGNKM6tuTBfZCXNsOQn7gIFCZ8aoc7nqbxR85kFVfOH5/lTwq6wCdcAEg==","shasum":"ab0472758c53ec510d63d4bb900554166ae425d3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmaCRA9TVsSAnZWagAAs+QP/RStz1+0ivzjVFr/d9+t\nbm6/aAwsQBmWf9ZxEMp6myT+B6N5r3eaZ1xYrPx1R0Iyi9mPYTOAipIhNnMA\nisFIPcc7HlvGN2R85bQtg8Gje7XrUoaOWjAFaHUtj13IIc0Rhm7K3Gwe2IH2\naeHUh9C1HM5H21JFiul4WrKP0fX01SaNXQLKk9P2r7TbgI8a9qANs9i66ERH\njt7MXGCVakNpx5+svKWNhrIulLKN51jmMavFbsylH4nY8Idv1manfCDIDpga\nsp2mIUP5m2K2BYLd5B5m1BboBg2uYKbB4XaoEH2izP+r564RddhvOA3LM+59\nQNRVRMfI81pFOrcWJbfYxNxgKihj9kEDWqc4EtI6DaTB2CoP7Z58xV6/SsyE\nX0lWc63Jcia2nYB2Fz5+3D2ypQ5NXE+H85EQ/Sd60SYRScWoNckkQXxI/8UO\nQa0DrDUt+66ICMqCtiKAmcRjAggTJTmkrP/6nKfew5jVfdj4umD2k/ZpZ1cl\nO1XLds67aqEtK1Uk5x2tigkuqm5z/xOwh09/ED0Jx+OIxQKs1P1JGfmCJKy+\nupQ/KFgPSYExwTIREwuvMY31UGQ6a9ejc6TVJ6itBSnblGROJeJBOHW6L7wc\nwGlgXmKQ5OzW7TEVOVTG8j3Vc9GyjmudqmTkX1WxeC8m42GbzQD4VxJ2qFgr\nn+4p\r\n=jIJq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHh1lzR/LcU7rS3MTmUulQulrmXicYt8CDlN9w4ann9AAiEA9+Ju05+ZPQjHky/AylI4v98p9jPprqZp3hHXytdC4Js="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.d1379acf.0_1588959642404_0.30224661724070967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.047e6b337.0","@material/dom":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/touch-target":"=7.0.0-canary.047e6b337.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lk0j33MQ/lNhlU3ZZt+dJwr/sUW47rlma+wpVo5Vm/Qahcj8IsOaTFn+jLfsyfVl9dKtTpKsGljvCbWeJEgFtQ==","shasum":"298c1642198938e06ec410bf41742840ff402740","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbAsCRA9TVsSAnZWagAABGcQAI2vbF6HS45iZT/pgItP\n00MQvjJ5RvfxXp99/WXli4c9PzRXiktPUFnZnfwO3TggYddPYHhdsSo9L7D5\n84dTyQEU/8680VNKRrrLiZPKSTPTdALpLkUGuY0BPMXtV0MUnC93qvTmPdjt\nlxh4+cifugqjZSFnj6ewXcJ+27E01qd5sIW58u7HBjESSXGk3dkySAxo0EsC\nKg4/dY1muTY5AhWSF8VZdDFJVGSNequbvXvupIYQYaic3FaFdpy62TCeu1+4\nVa60saytQpd6jF4UUgmjCiSazDPUUgG6aki6JbNk+T7k/fw+i3prrg/s9nQZ\naQDzKchWdlEgMc9a/XNhAuJ6mN1JYgyUX4Il2D3KToIZ95paMLsJJTPO0FxF\nkFQsAlulBkTCdu12JiDp+f70W5r9wEmcfHvrwSZdl1l0CGC9Met4M7b9jI3d\nncd80Lalpj5njaiFyMxSiMPor0XbS2p9GJnxUB5oGmq+VqZd45QOCgJF1mra\nnphMF3kS9wBpo5j/5GOeoF85oLXBHwxwc3iptZ9ZquiHr00re1Jt9xOQo22a\nWLoK9eedNn1P4zGFeH3o5t5kEYYxH4SDC1wsYQ77Lo+LVlwd58rsERYAx6k5\nFV7ktgL/kt1qSuboR80UWN9wFkHDxVl/00l+fIpIxvR1xTIUNMlARDKU3Yqi\nyETW\r\n=+up/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9pqFNs7XDlPx2vMCmtLeN8VkrE5orfGt8Iwj3TjI4HgIgOaKfUbrvcPu8jfoC7i6rsrpkvwNL7A8WmK94jXEoJ0M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.58d51fc0.0_1588965420459_0.6989236436325212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.119e21426.0","@material/dom":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/touch-target":"=7.0.0-canary.119e21426.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-chrQhXr1VUYZHAYkvN5b+IfT8TYD1alDZC77ig92257f3xn5GSa9MJlyzX1wEfZsNUD2MBE0P7bgIAwChqdbtw==","shasum":"c68af407c6faada071c81c527e24554737822fde","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc26CRA9TVsSAnZWagAA8zcP+wZiQwx/rm0BclwnrcjZ\n42bKAqEEtNwIITiqoy9b3fLXTVZbFKtCoxfIiyP05vBD/pTcDBB2gqVxIR+L\nktjRJJYhh+QmaUXsRp51h7ZnXhZ1iHrPDyc9AckBt2+0OlUySxNAM51zkMeW\naQjn8C7MHHH6ztcCfbs5oGmK8Z+CkGgfqlD6k0QOd+PV1ca+6GYMAO2zM5GR\nJoUR3wATY4GqQiZW2Lh0cNBZM65sRLFFaGt3DpQ/Lvvc/NAcgfmm6WwULp3s\nVyoZXdozH82L4NxAbwGDmCwwgW52ANdXyNnERw1GfMJck/L3D6z+FHqM22k9\nFDlu/zwYwMtuI2CeTPGu7ViAq/HspQfC5rdQrFWdT7oqz+z2rDsIpGDiOUZP\nep01fEh62oek+EoAa7+SM9ESGTil3LcTLmv0Rj5V926V/ZMbU0hjqQLftAQ2\nx7tyQZZqit3djXjky5T7bpSSFSzpqUT0d4N1VUpaZ36sBDTU0PC58wTfLlf4\nrjFFBWnRIyLuv8VZQzSj3vfBp200pJgTkwJtTs2BbTIOT5pQc+6AZtGBUw/I\nHilGgF4AcDyofwXC+6/GEgTOyyhpR5B++TMPmo3G4wshV8EWXtRnMfuDEOP9\nvILKy85m62kEqv5mbvgxPXuL8Brg7njOVg0epFpfXnH4yh54iiQDT45fRbzf\ncmHR\r\n=Mhzf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFUf7BgXj6zSHHfCYns3GtVlc/NREnoNuDMgvTC+RQpAiEAm5GBmwaflxiMN1oL2kdErF1k8Ks25oWDHtxZ/WEYcfw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.588062d7.0_1588972985673_0.2557225801134302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a5aeb3001.0","@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/touch-target":"=7.0.0-canary.a5aeb3001.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5NIzLE3qM/sSMfIIP36SsHxdiiKiGQm+Q+dCujZzk1PKb9y2PYCS5tzEyrolwkluNMBBh54IwL0/Tc1a3L4xHw==","shasum":"2586e2bbabc2fed1da58c8172b52d314c0e8bb04","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYt4CRA9TVsSAnZWagAAYykP/jL2dxROeQt582aCxLpl\nyYadviyXj8WGiCtlLdKY2TZfkhBUmr7/8rWXh0c3VzfT2t88S+Av4Na6Gzei\njqTiJVOTArJQ68A5eNeHCAtpsi1sIoSAcqSo6e73gtuHS8otX4Sq67vLgXXj\nz1zaLImhCIWpOxoXKdbRAEb4Zlip4APRv7/MvbDzgiaduEugByWKuoQXN3c7\nrWe2mi0dXERAhOfzdVndiG6B628dto7ATEgfdBxPiKT/yfZweRX51SjZk2ID\n59vsR/qSvmp5Ku6pCYYeU6BJ4DOuNhJXA+sutcnn9hzTHy4H1UUNFmNLp7bU\nrAlGvPyPfULmXj3oAdHlXYGVg7NOc+sMDv5mwxMThF9nGVCavxPCGzI0D3Ud\n72DFX46E4LVZW3WZ9X9wPN6Ow8XCRn4idyrlVdh0SmooMrOKGzBA6dXvaWKy\nxpLIvQar/StvEY4fp2S9WFU49N6RsB6p3NYoxE5h50HHPHDwxeK+x5GLCERf\nvlIOb5Z/mbAWpG/uOln4Hki1BrOrVFuyRyIp/vTpHl1Q3muJzITxASM/GQH1\niqK7Ud0WRfoLv9aH+FO/qxnQb072n/XFayEdNZ8aUlNG1Tc8OIZ/pr2Gfsxq\nZzWlYWXXydaFMFBtGpYQvZ7X/bRptA9nQsEZmxLor4A6EfVal4h4lcMceLSz\nRI+g\r\n=sgir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYYp6vAkw7vCjjdmGl0U01B1sP8ZmVDFbQ/Eb6qgNmPAiEAqWtQrJL5AQQTHudT/lFBJkyF7PRHgS1vjCtqX51mFDY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.fa21f639.0_1589218168503_0.7524435923320438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a5aeb3001.0","@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/touch-target":"=7.0.0-canary.a5aeb3001.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NyF/LcKTZF2vvknH3+5vNSCLA2+ya2SWBIjPCm8iM73nvb2d2hY9bNheiQ7V8tDzh52ODdVws4ZPQe7Nw0IqtQ==","shasum":"27d672aaa51dc17254be0024d510ada518fa151d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsbCRA9TVsSAnZWagAAY5AP/RGhjqBUk8+8pxK6ZPVr\nA66qnQmTcsrCjiTnOlahRpFcrrHAKYxejcS6wtJPGagSq+sWjV7DAuVKDu2j\nPqEhytOg33A+yEWPXtIyoxupO45VYwc7Qm12C06684sTlFPV2cToR5eGAgxl\nSeNqKS7hRmxRHKm+PnfyoO3Nxnw+nREj3beR2uu1DmelcCvpCfoYVbk0KpQ8\nWljLzU7tyHIJa8mALfQna4IaV6Pas4QJ6a3XQeYXwgu8d/huTnCdvymBspZU\nL9/OAFfW7QJinlaZcjmqSfinPKLzjw4KRV7mHl88h+wAv58K6AEHAimg8Y83\nV1RJ0GH5/rweiLtNNywzs9a9QH4JdD8cBOgcR9y+OMK0u1EZM0U6bqA09M2g\nsbj8vnYIrlq4cvunOPRffWXF9q570Vmvpol/oOOxXZ5Z9PBk34HOHY2fMu8g\nwJDjAb/pEk7v+I27mOpfqtB18U229fQl56eAGQbFbJrco34t5VqSVbxYpCqk\nOxkTYmBidgUgxgJtBZs4kmpbJHuvOLEhVUmkzWcOo502NqgiBxusXkmyozot\nkEkA5x1a2ysuU0UKXutS3tMYvi+Jjr17Dv6JM62zh3WWi9RK00js3wFbd4Ai\n+gZn/uKAFm6pUK9xVekme8w+0GtiKzzNfjoVeku5h4lVE56eDt3uNIyqHf2f\nmav1\r\n=cYuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxk5lzNKqb8Whf1taNbG4qe6Yu68SZZbdI9SWogSQdYwIhAOZGW6QevL0MwWHivkH6KVuVCqJhBBl7uPbmDphQ99Ve"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.2772c509.0_1589222170932_0.41191910145129906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a5aeb3001.0","@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/touch-target":"=7.0.0-canary.a5aeb3001.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GYgPoPjoth+nee/KqRYxW82oJMdEN6iO9BZgKrp0Wg59wn72q0tHdy5ZCcqj1En8wMOxJMcSD5zHKS1B2lx+uA==","shasum":"4307f2cf0cbad0053a4b586fcc234b2884cd2ded","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/OCRA9TVsSAnZWagAA8W0P/0YNHfNxLfETSpZD89xr\n8BI0Clo4ChyFWTfk1dVGZKkrs2je5SKmXN6cEdYOQFexB/pnd4JpOjA3F97A\nMEbQigeqLSazgR/Boeac/njhA6Ro47eiRVBco1vGv0p1lFmNp5vY6GsINUfK\n/sL0sOcvZ27l0tN3zEXpJwiORZErgFOO3wOAX1GJrLFwmd08+4T2zUvcP2AL\nEvRxw2xPaUARb6lf0iMGRuOCsN/FBsmHCuSpwQZUX0Yt0jwWSWw6o4XgGsPK\n68gLYAtOaF81XHuRkeZqjgsKfACGPnqRgvj5jGzzbE5weqz0ntdlRXC+W6ns\nMNyH8xJjsHVyqO6+xhw2HQ8+f9Egt8qf4fA3eeC+yT0WfZOBFOAwsESDPy/W\nVt2q3idL/9v+pmLdilLfY8DtKVOEKWUf8CQLQ1unNiCSfUcBEzNX8xdTzvcm\nh7YUBvacRvi488X92MGDhFwbUI0TJJaUTWAFHxQSllZXpA6Or8mOjR601pXU\nZgR2/8ctBWIB+FueOM6dgAxpWzjrsIwBAA89cvH52vtFiimQ7Dkdwaz4Ewhs\nUKoE274hYWQzpWU6pyd6GpLh/kkNd+PMdKw5WYsv8xxmKceke5hZLT2qoDoL\nMJ2ouuT2zz3szpo4MrwIIzWKr72SF08wIh38zvwwVFtwl22sY/e0Q0pDMYKN\nSJFo\r\n=nhrO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+nPNGuTpcE2yMHJsu11lbg0QnazZmRB3qGadiiL1sDgIhAL5cMYRllEe+lIlu4I3lH5QJfIu5UD1bUu2RI0sWa2pi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.fc4796d5.0_1589227470428_0.36241425837040153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.ed52af767.0","@material/dom":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/touch-target":"=7.0.0-canary.ed52af767.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bc+HcImxovJ2jLoioMCmHRu0Vmk75oakSXz/KBloX6368GD/fPMK0u/FGFBnpwORpUqNpznyQCYM6Ovgq7nl/A==","shasum":"fc392755f15eaf865f8e3d880a205d47053e329a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFWCRA9TVsSAnZWagAAm5gP/Ay48r+tgOA3C+b8BX/l\nNvYOMoXcAMJDdLO3YDjZOm/F/WkxJpO8yP5w0/iSHXBLANwXwkb36OmuT8ur\nZR6Gx7DEnSRj3dqNXnqc3ffP+qI8PiuxOwnQoeK1oz27FnTY04CIpV8AZsTT\nbNTr2+zn+CQkCR73quj4mhq3fCKBAYGKgQUXgj+MV+baU7VJXGpa+EN8x5/Q\nnHOaFCC/CbjUMDbZOLgSeLU/TJAIxfSblVGFmEGMaXv7T5PnNmASWo8M/C62\nnCJJJhvwFwBZLRsyU2E0LjUu9+NcxA2GawUrRfem+nkJhcgzH0uxExKiJQBZ\nJecYog4HgxwEOp01ZDSUFC2Y8PMty3nguiOX/CuTs2eFLti4jN7Sv5Vdwo2n\n5BnbEP5i3kugCIphw+8nPon64uC/KEWgNNPrMbVveF1AnyBV38kVwAVk1eL5\nFV3F2aZqksH4mAl+63c0sv3u4c5m+fpvIvGiVN4qcA0pwodgoCZWnxPZuV/G\n6cGBPmPwnQT32fQOxSxQ6JOs9irZBO5+6Un3jjU5a7it5YVGRQA4ipT8gMsP\nhwdgYrgbLbE6xl7LelaIwATWEN3oBd3x3LIYW4e33yrSjd0rxmdLJIjxKq+M\n0X3Nx1ZYlAqyIn4++xAF15/7PFYlnAdPJ6tRTaosOAp633mAAzK+8+Mz+sjX\nDFmA\r\n=W49p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCScFTXhhmLk/O4nFY5JYCVya3QkcwqFeHLhJCN7uWLFAIhAMS5dau917gkUFZkkfQ0LJGqSUHmloedLurgCnkc4pYz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.0d1c5f2c.0_1589231958130_0.7683599073711525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.058cfd23c.0","@material/dom":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/touch-target":"=7.0.0-canary.058cfd23c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rTV8kMLQuQlRBAGzBjPfBO9uO9VB7qpZpYvhrMGbbwWI4xZHR0IezJPu3mb8c8A6XWWP7YogbqN3ViROUA0UCQ==","shasum":"7f3c5274783438e10e683a1b6e021e5322bb0198","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuessCRA9TVsSAnZWagAA19sP/jscY8Vo8YODjw2YRUnf\nFpVXVI1xm4NFbOBgDbK47PgfsSfRI9EolnEtXoC6UsoNt/3JcQEv6FB7vGrn\n4Q/4jOYNYKLKqBzVyBBoBwQ3fot1gZH0uBbeD4Ody9+E5Ag6WX7OZOye9t3W\nRaTyewxASEUWGsOkhI7hfd+3H0DRzA/Bi4NyA4ATXuAjtyUhYoeXgDl68GAj\nLpOfavA92846RHaFPZV5B+y+j69mPyi1WRYFkWaeBGvN/b8fKS+w9bb9iwGn\noTkjU3I88vZ8T1U1pYfwugqt0uACHeXUmV+IlruDgSMsT8IAZZ+VmEqQwgDi\nG8a5rsmThKcdGkvXBQqO2kzNddMx7CEUEbNy+wWC7u5n6tw3pXlNWEyLI1Ur\n0Gp3ocm+mGF/G1VK6jOpCfWFiIpi7xe/DWYgEI6YV/BhCukbv9tZmaJ/pknG\n9nDKBpvqw2rHRqpSWEL64qCaiteNfVu80sCRKBMRMvhCfzDDron2WDRIkcjH\n6tRd8i13XZJceneU7UIabwuw8KBVJXGdtK3ZkoAtdyBrdOgjqoUbrVeMiTAH\ncrfNbmPVUiDeL6/WxcXmRikoiVqEyRY1t1zPyQ/S+2RxRhDYLF5asJjKW72f\nM9bjdTA0Jc3wBWHheaS24gKV1rOQ9ZNlIFdjgmfZshuPc5slAW1d9vT35NRn\n3DNl\r\n=FQbW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHa7uJXJAOldzaryjJsxH51Tpslx80IMjWfP/7IErK4zAiEAketHZI7Y6qL2MREnZcT5djfTSdEl9NVfiANQR/xc5us="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.d083d93a.0_1589242668142_0.2696896967668272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.058cfd23c.0","@material/dom":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/touch-target":"=7.0.0-canary.058cfd23c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bV2HAwDYZxTwIcqt4zq5sRuF9GwOE/boCcOkSOwqeJNwxxPgbMPPCkLOS6/MG36D+DeFZM71P6pwYpUKG7VuCQ==","shasum":"193e98cafd094ecd08ef74931e164683893c91da","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxbYCRA9TVsSAnZWagAAX1IP/R0Be5VqgB8m8yFZpL7c\nuJLzNJPaULtcAuYXmmFLads9YgqTixUujzLMcc3eOCKB8jitOJ22WK3OOpKq\n7MWXmF7fTitrqXojCNRkmYlgNKMmotHu9dOQnSVCDeL5ze74ewBczGWBVUne\nlS/3T4poy7LGSzRDbJZahEwDWlM630sj1rUHlr9c1OpgF7BomD5rlVuyRYUH\nPPmdCY4whdQfon4ClRXbTBV3wYe/dE6FPInXvrmvbmLs+jM2a5Sx2jshEPoy\nwvNrQ7g5vtL/ymTISRAF6DTExyRHzhjHivbWLdGWI5V9tfVZRvW8kqzyNevr\nMz33O0k+H1HuMMbt+6x/hed+wcTGF7LZhfHQeCrghrfmJ1UNiVdad/yo9nNN\nG/y9qKCidqKzXAU5bWTZcbNFxJYusrZD53InMLLTIWGk9thn/5huGHiXmNvh\nP7Vxmlu7k/cYGxY2fxJrXhOmhL0e70T0spt+aJTQJHkKvUvUCwp2w5ECjxHN\n56lW1mqaAcQeXbt7G4fZPTeulsNN8e6jczj/dF4A3540tkA4SDuiLSFrni8T\nrIbV2B7Bb05QyuUlxuVA/avCPjLDWz7TNeePC25TnuEHBE4Y1ZjYNkjrZR14\ne+LvWSzLcLdBX1VnaZqEWbMoP46ALdJI5V0sYrt2XW56VxMHOdn8845Lu8/O\nRBJ8\r\n=rJ13\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGlww36db2hIjNOvRGR6VhZWxYrbd/SDZQbDuM6JumRQIgcirnEc/coAavWtblYkvYoCPDk+5H3avy+FUVPF3Xi2w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.c95d429c.0_1589319384457_0.19738184387843227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.0a371b4fe.0","@material/dom":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/touch-target":"=7.0.0-canary.0a371b4fe.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Gi8XIeRBg6O5UJUa3J+NwQJ9TaQiR65oWQWK1dap5GGgFothgrJnEZH3zKVI8onbJTmeFPEZbOtEGo825FQhbA==","shasum":"674fb3b9fd1e29622f9f2577c8b9247895e7202d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0BoCRA9TVsSAnZWagAAAd4P/2KLtuXJ9W6jyuJXrEep\nDNhjQgN0C3YH9u97f9ec9W4x8tu0Ur3vhFl3Gcl5CHHxJma9vBCnmJstPPgo\nr0boVD3cNhUqRcdEHxdtRA/+AjARHAX4UGE/mgQtnMa3Df6kJlWaPoVt79En\nohUWZC9u9llk309X9maLjzM46OpufvWjtuqU9QFje1/snAa4JJRCC+QjIlbz\nB98xM6tOpQKP/BxDooNy4vWop//6p++fw0tDbdOMaIl7TbQblzGULLJkMgNq\nFDnT7zhsKzhwbf3TKEQQNUuRxaQp+bWextwdhUdbmru8o3QyC3NWi1KzFVdN\nmOnvj2l34e2LtP1MigssVYgLPkx3cSABdahxxD461+BAPNGHNSsQYoAfhNN5\n8UDjuRrdRrXInZPg9MjuU04xwOQrxaQp6Hd6SxosK+N7aSpB/Y22I9IZBauD\nuvYVw5xbmHgKUCjwdBNnxNk9suvwlGk2zuUrpb/NoFrRryXPv5FavFOnog7c\nxGZf88PQtphrTaoN9KxXwjWGNAf019bOjhsNIyFvv3e5SwIZKnEQrayrzxKW\n6b7RfVDKsu954fCOCAXbdWXzECGwDjByjTqIyrVUaVtcX9r1gEhDlknxOsEX\nQB6XzEqh2UrwNRZOpDEZg4MapMh6O44v2wLSRtWvK7dr86Hy9JXDwBYyizAP\nPvFx\r\n=c7eQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNgBgubpkNUnMwSk3+MfgfOs2AtTA+R74KZ+c5Yv81DwIgC8pceRl/94IdRyqE7YJqaPTU17fKB6UEPrcN59oDO9I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.0c1ad726.0_1589330023671_0.4055342878912114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.2139200b3.0","@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/touch-target":"=7.0.0-canary.2139200b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/I2V16UDj4wmRBFyrCT1Y4HwjS1ZgiWMESYN2e14SweasIOd7cPXigsOgVkaGgJjty3Nb0TbmirIazarnLDEug==","shasum":"cb0448de5523d5271b7ad227f8993deacddbcc5f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCvwCRA9TVsSAnZWagAAvr0P/1JRVVjM/fekuftbubv3\nQfUFL8G5hs7Q6z6mEtOdyinoqraPIc8hteK1pYmRbYzI0bNWzyHxm5CXMyvg\nNfNtWz5HYRiVdsOITZgGkLf2y56FM+yCJyMVIexqCIf1yGjtkTPNwMMj4moz\n8WiHLkI7PrwEC7IdknoYCLcjFByfB0owDW7UQYPwPotJGFGEIDmPAMsmtpzU\nFJP28bpSn++44hWH1jFaY+7aHl+vboYupWaA9O5DZXOspnIqXp3oWi9J5jXi\nzgg90eFp45o3Gv1zMr9zJSXFDb+tbOouWhDvqO8o6EdGbElgbJOaQ/fOaw7E\nBI/3pb4F5Rm1YKfdNWTudYw0q1LRlc/tNQ3aMUNPX3xBuhgBRAOlRdNgxudW\nu/QsVD9ibffSLotdq7Qyt/9IpjVBrkjd9giksDrQ4Q+kdLh0NsCMIvdzd1CO\nwD0mCTgUpDqZ7n1RV6Xl3GWTbAS+qDIvE8GwFSbwraYcc+fJKKT7s35bxYnQ\nYs5fN8b8hkyQzw59HTOtSCcGvktIfRu5CvawJ94zjDz+RFcmEPPRwDV/v9LT\nJah5Zv8NeydwQKGsuMevOpT2uwAvn4zwkzDKZKnJoXdsHxN78T/CzoNEfrpq\nCzYFY1UxnbmpWvLPBZPLPRWtoa3kZtznDnZYueZ1wl6fM8yZqnvvLtNVso2g\nt6er\r\n=bIJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDas/YYaoYc+v5OVWQkv8IbY2lQduRP4FX8mjTd6XGhLgIhAJESoAof2bzmH4Y1VFOntRvmbRQFnnQzF7644qsZ6BHy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.8b6a4700.0_1589390320498_0.19356682774143197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.2139200b3.0","@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/touch-target":"=7.0.0-canary.2139200b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iQYMV35+hRalnTT9NR+ZJRkKD8tqRN6r6jHrrLsjDSIyFJPBNvSZcgP6YpGU5ghFYgnr3WHSxC0wQrJTD16axw==","shasum":"2ac7e28a7056cddff403e35825e5f0c26e03e41b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGV5CRA9TVsSAnZWagAAz08P/1o1Wd5CLxRtfOPs5bYB\n3kd6ZJkcYaPmx9gYg0g0R+SbEHtyUCwtAwGDG/VYpvBZYMzCEMvRD5W26Ia9\nqs3hsX9gJxusrHFgVQTJ5UgUz7GMzLvq40V72FSsc83o0hDAExzDn7e0X80b\nq/MPJnWhDSg3tceADPj3X5+xXsj5GamjaHu1acmxEUWfhCadoPTCvdMWoQw7\nXfiDzxtv+YxlLDfrWnC+KLzaxI9zrwjrQ64inYoSvQh92GDkXQZJiAPjSRHV\nY1M8Osr6MYC96nD3WZ8SYZ31VPed3W1ks0p299y8dDHuCNpcJbLdQJRKo2oq\n9UtCRgari7G5FXCGP0fxIlSFEdeRpfhXSKR9WKeAg90JQFgSoDjc/qo55Hgr\nA+FD7GIOZ5EuBZVf2Afg5zK2zfAkg2e82r4n0oF1AF6U9GxUw/UOyvPQn3cN\nzpThwKbWm5D/Rqw0qw9HiIvzwZF93yEQwRmFO/wfUHOyBpkEclgJV9sqHBD5\n9NbfL/BJLBzXx9Kar5rr+UTm/r9qq4vFCzuETQEEC+yvvK1DxxanWCfOBtXu\nqNf13AhTGBlbVtyxCNkWTvgT4MXLJLvT0Ka5TwGX4csJUGk2Vr9toCaVZHip\n4cODnrayTY7WxdGexEZcQvRQRSQNPW6ypt6qYwo+gAVozYZHtdr0+nez8zJm\nN226\r\n=yePU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfQTK9VXlO/6JrvRhkVGGyTrANE0iwpzPYe2m3PDPVKAiEAhXgzxY1OF4yN8QJ7XerAFeBIM0UYWirYr7/auV29V2E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.3270effb.0_1589405049304_0.004441648109698937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.2139200b3.0","@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/touch-target":"=7.0.0-canary.2139200b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xyyTfHPLZUdq3BLpYmObf3VRPXdHysNuska1vZUkxnPtwRXoAgmh+/lAO/IBVViyE+eCDOhiOcPta7omaHjWag==","shasum":"69a162919461f1e187a6e632cfa06301f63d6f02","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYfCRA9TVsSAnZWagAAuF8QAIOUD6J2b9KDADAWIkKz\nJ8xsWzC1BIG2CprwQrZYYyzBDy2fjNKtMANPYy5jiEZqJQal7KP6cspfPfFQ\n2SKeDLdU/IYWJwkDZW34sX/mtqfptO55GoS0h8abf0CHoeysaZOWpK5bMWUo\nyhtbRZgX4Q4bSQrEtBGi2pFjDPac6Tgo06rmLIRIJz8vb/+CDjFK3lpZFilF\nYipn4oo84zRDjNQDoveEF0NWjTmq6Ih1Z4XaThpVzMGA3NxD/vcYw9in3R4A\nrisnyzJU5PSwoFSdmxslWL8W7t40VBXnPQeGUiEZ3c5Hs9A8c1D27zRhspqR\nHqEIKOUX/CuGa238/nF1iYTQEgDFp16c854Nngs2PANF8PTLD3w5DBSiXPO3\nZxrH4Eu5TaOqNTq1ZqKwA+pElS35qyGhZkvT2IdddwTgSGSCexyr98yy67I7\njJoqv1kKeOMjRrvwu0UtJ1gOS8VHFdIcYJE84KVAotU+vMaU5M99b7cw9yhn\n20m9mZjYZ4Vwi4jRYGLEy2/T+pUQAzyxIFA6MDu19IERIyQe1D0DNY3SU/Cu\ncSfuNnSrfEXHd9/EJfnDKbQJ1uQN6b7zdcFLam3/VvlDFYwAKhxdEtRj++Ug\nRYousSvWDr2gV82TB6epBoJe+FxuxPQUxaBGvqdi7kfJlOOWq+FC1+is7ntW\noOOo\r\n=ma9B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPyNXKG/ieqPqJtqh9riU07pjFCUYTI8flddwQxdWtcAIgdVRzH2X3sSIRRK2MLV3MfZd7PLYmPpqn6zf8K7vFfcw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.832e64f7.0_1589417503320_0.8933062412399098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.2139200b3.0","@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/touch-target":"=7.0.0-canary.2139200b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OWVZFsdq94UYtS1J8Yr2ioMp9bcz3ZIdPbRKYXuPa8dHJWmJ+VbjP28UgWCtOTY4K7cn1U4qcarBv0H/+kuTpw==","shasum":"3351b62ca8faa6a70bfd745479b7b06b4759abb7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":114334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLycCRA9TVsSAnZWagAA4lcQAITQGqdliMn54/knVSEG\nFn3JAO4mogHD4suGqozWEckrrDjfrwJBDgJg+qB5j05Otb9ClFxkwuytODuK\nNLFC6q3uD/sD51yuKJVynbdpYU/4RwiEHYI1cdFNseNBEylKSU/Fih0B1NI0\nVhloxgeC8BSl47d4pXeIv9gWvY7y+VYd9SfxL6AX192t1CIP74qoQ6lY15Mj\nC4kpUH0XdJWWMMw/2g9DcURwYGym1N+JsZ7pXRGLu68HYY/m5BuWFimckk3q\nvbXVRXbfs8dm54F2+kJgFaHI0+iHmvtil3LhyBEPlnuWUlknOjypP45+t9OZ\nRPer5eAvE/X1/g/VV/FB/Y5asAojuIIHmylk6Z5T+ip0d65NctD8w6eV8+yl\nMqEYIqrZdsJKd1P4ajhB7PW4GmWfDkL8Rq4KbQDCQBxHSyeMlhygh2H2QU7d\nkmd5QSLMcTLi5zA6f9bt7Bf+iDVyB1rRV82XnX6cFzujT3vtHzCCUY4spRNV\ns4BlDlKVJMHIauiN/Lh/UVr7a/MqTRY9GeXFHek38Kq0QlsaNMOKm1RFnPCH\nKpxbYcBTl8XsWpTjlap0C7j1PPfV1q2zXagC+l7KxWPkTYoh3jT61V/o9wqD\nvhE4DzXR5kKMSbvxpMl6W3lszGW7utXJpQTs5lWyzYA/7ElZIrrrPHlctY7s\nEOud\r\n=l6uy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+Wrn7wUVbi0y1FOO+aGn8xjx36pxlYo4OvgqzmK3iiwIgNDB0m8XeiW76TfTHBjNoKmZdHV1FjPbfNYGT8evlMOk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.472fc4fc.0_1589427356066_0.2896946217967722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.ad0c0c103.0","@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/touch-target":"=7.0.0-canary.ad0c0c103.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oP+efOlsC9idy5utubjxCkKk0P9l3r1qu0Y/nbpdklZnhyw2aQzLB/n7AXj5B0WD9C5p2GzySsnWI4BrNhul/A==","shasum":"533e97f198429a05061f1a1499b78d8619fe8779","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXCmCRA9TVsSAnZWagAAZ6QP/13shKamwp5pp9A3BLsl\nB0g4YKIiwaE96wuRLuAIhFdi2gcrFBxM0cfrpo3VXF4sJYPMqDs04BSHcYoM\nNTJ/kGWEh8L2IF1ZMdyGsjcCgCvZ49CYikEODwwd86XJvDUj+xuUFBbmrBSX\nSZMjpx/2XOp6mZnOdUqkwJ9P/30g0HAOtSemvetJW4/1tE+Hzjz2pBoSPTFz\n2rJ17HjEu0sxeYTsGs1SuuSbM0vP6MO84O+uQzqhz0UJKw/V0eiA0PV4fwe2\nycyKFYgwOD0ei63g5b3rHfjWLw90WHypvaorymsSBH7/z9zHr6CR7LHpZsjG\nbS2RqcDSsWy7MNAF0V8YmvBk/PPDvFY9YnoG24xTNXnNxnGVAWI4pnFSYML4\nFTffnPpEy+QGyPLgHYOY8g5guoNnRfSwslWmp5BY3M44X+vd2Kw19aXYOY3M\nOO/NktDzdoEePbiNF9A+zA71wiT58Vr5nyhPmS9lH7sFSFa8IWzJxFuGd672\nAXEcLgmaaA2Bp7N07XZgmeNCxnE2U4s4rdCbrvkpnOyOdU2Ih7roVCjo9Dcr\nggfq9pBYfUcREb+oifpWJhdEJGOjDUJYx2TCaThTImG7cBlD0/AAPD+HPG83\ndx1IqMoe/hFFxq51EcfYXwNDb9fEIbpjqC/S2yltf+2SrLnJVrbnGNZ2lLHQ\n3i73\r\n=tgIM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB990NCg0YBRd/gKdfqOVwaXF5oJ7k523kNwQCe2crHIAiAkF4zcG/vT9h8VXr5sklFp6CJGRB4GrMU5IIp3z6uQIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.4dcd7dd5.0_1589473445570_0.28762739079761346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.ad0c0c103.0","@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/touch-target":"=7.0.0-canary.ad0c0c103.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6a7nsJkymbwB3GgOZZZKHiJqtlVZpwYAVgg1LnbzlcMttRp1GsWHumyaYkbKJ+TlkXwgOwBxbBY3rwRtrV9Paw==","shasum":"0f48dea6e6f36a4e6ecaed4f6115a55524aaf124","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxxtCRA9TVsSAnZWagAA17kP/3fp7cT7fw4J06G5kRLv\nrMTvUL80e0yM5TeckdAe3Chjh7KqlNOmnNl72cZsoPdp/199mdqurdKlkbSJ\nhb0FmsH5Gi1SfeAsiHBcqVyboLbjNPHdPPfTvWP/HSTUTx9iJK4nE7UZkE76\ns1l9w6fJX6XRaiMSos+muM2kYnoR9q+WG0e6Q+pmivWuz8DKMA0opq5Yfl6N\nrOtvgCXRi7WmGDRLH2Hj042jwajMmBvD/k1crzuqc6gJqVY0ZWnbw2Hnu4qj\nyXa86aG6DfmTwZf9Rvm3c7vz/XR/Uh7GFKhnBjIkgHMooS2AIlIEpp2YeHaP\nIrF8MZaqrKzeOxc1UZTiMPNma8iNnCdFRw4ZLM91Pdj2HOrvSJ+mhV7wQdgp\nWL+1KQ0PEtwLRMzSkWI9mHEMjtz1+p/QIINv0QuobYrHatqwwln1dhb6k7fz\nSXfUiZyqzPaNEAMPY7/hVNWdPSvg2AnpeT85YqM4MvT2wWD+iwVtv/2PlEkw\nmSgzpwtSVxIfE3FPmv6aPTJNiv+zRhKZawJcff+N7fKjIDNM306CwmB8ardG\ndZybhAk60gfF6y9r7bCuv8CsnJRoePnX4DD8bmUkOsnpCsDPghJGmf/AAJLG\ndaQL7LmyYvZj7ugtvtshc2oGxjuuh9LwLGwE/LrTmViJQX0Tjls3bHL+WVQB\nkU63\r\n=5HSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGa7ctBhwofn0BpSS+OkIkTQU+Cpp0+WK56hfeKoahfwIgU5Ku6tEFcf9M0G4KOqGPXp/eH/LMaySEBVnIzFgl10E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.bcd3400d.0_1589582957234_0.9140325003545069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.ad0c0c103.0","@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/touch-target":"=7.0.0-canary.ad0c0c103.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jbvk00sMdPo8zMsZy0oXLEjCKuLRwF5d0B4MNy6fasz6KAo0U/T3Q4I8kuRkv5RgYNMrVCvwv34sGEK1sS16Yw==","shasum":"933f4cd434658da31eadf5ee967e72b2034fc515","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzT9CRA9TVsSAnZWagAALygP/2+91XoUcbQPVWFkUgNd\nEl24Atz98CjXGEWGzGKlgwm4yYSc80xBUjYsqHh3qRRL/lck/APdCNMzgI/6\nI8K0gtxb3oUogoRDk9Ukk81dQMSy9cZT0XPEilrwRpeoC7x9UVJoxtyWJbva\nmiLNXDH4MHFsWERlE87ZScoPpqoaoYnoInoGdwQw6HdwZdURLg3eqnpDq8gP\nYDpkY6VLW9mZXJ2atuJ91rHdVts1z49Jzqgcmua9FhUAuz0qhfjdbb5TtzNq\nwjGlArMWBbhZg9rkpMAZcVzgKdigQYhl96SXzgj5KGLb6aUfCrK+pzvDUDs5\nNR0QXtNRGA/5A7GqvpahtBRBBeFLw1I4BG+u1txLJE7rjpmmYTcpPInyHApP\nO2cQWn/ZT0Gdvk05ZXiQl+JyIC5NCu28f1bmhTbCR5Fx2ryRe+POgdwyZHQR\nj5wpOjPoEsty7t0uhuMk+d/HRoGoHEYCWPP05ZhdiC+3pe/cwhNu9gRIeMey\nRgrm4GstYMbgTvtuG9d+zLJ5M4WD7dwKAE1hQhoSrYYthzmkMhcNnjL2lI6n\nYZun4aRu83BK+wZ4KppJdM/v0FDzVXYqrUkdv9EjJZ4+C6Dli27qI1b04KS1\nuiyd1oWJKNn4y/1QDoubqDPnxBovqf9YZkR7Zldsf51jGPhLXm/iImpsYT0c\nVbfI\r\n=CjrY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfPX0Xe20e2GkS8CuiAoZZKhzfcmSDxoy0W5C5Er7+zwIhAJM695T9GzIykvYCq9hxCHZzDG3JNoovLTF3AD01b2Es"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.91f63179.0_1589589245422_0.0989030398554156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.fd8f8f2b7.0","@material/dom":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/touch-target":"=7.0.0-canary.fd8f8f2b7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vE//C5oJfxMU46ogFnmNu7DEbmmthsUZ81q6G1XkgSQQPtr6W6AQpxnFmWPyP7vp8HRzDRFhMgp2qUeOBgnLmQ==","shasum":"edd7536d317ff813fa977ff32a44b28929badfc1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtRoCRA9TVsSAnZWagAAFpQP/REVOR7Nv5JIEWtHErRR\nlLwDQYCL/Dan5+aR/GtxYsvToGqII1DSFCs6k7+154hZzngK16uagHb2Q4WZ\n7xEX3wjRWpkGXP1NgoC7h8fcdxw3f1dnQxQgPJAAymRnM1a3jnTqzmhFkE/S\nRyzKlTIhhfGCXf4My4QgbzfXfS/08vwBsW0kvz7dc6mUz1dM2lYZOYKwhb6F\nV3KZ+K1ofHD7G+71IzGjUYvGhkOQV0+ulIGlaSucxmJUmBIOGCinUZdijFB8\ndfjVdOV/ZUEhS18tufBE4z04zNeOOzy1LlSkv2mP9fYHbJgW88l82Jvd/sEt\nT07jxZgRZghithXGhOZwSWMlF9kyl23AIS/L6D2teQ9vYdC212MRPB8g+dGU\nNrsgMYP4/4KuHf/k/imUBBSLspulkTYNZlPWSIzRv6+K7Bwz/M8j8GG7QcUs\nAWOCamZ+4MpqdWePusNnk9FNzZsBkndAISk6CX8Pmmpk4bDDqYcY9B4RLL45\nez49Xq+YsKjrz2fLOaaQi5fDJXRmRX+/WLGN56deSCKySjloSPic7YDXenpd\n2GYhjYTWMqAJ1nFfuitUICVqBv1wtfAS7B8Rm3OyJgp2oAVd0IwNpKFDZiCv\nzoY81FdU6DGlVgbyrYtrq3v2CXddkI/YpKRShpgTLgzWSTwLGuSjONR3DKaA\noz4F\r\n=0L6r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDaeKosVmsPAvCVRjWl2JEQpdzDoh6PE9GuF7NXZ+ayAiEAs+ZtjfQEqRsJIxNANHdHZbdPYEo0B3CBMXbJ9Z0Pke0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.b8aafb56.0_1589826664434_0.8911768977028891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.730920fbb.0","@material/dom":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/touch-target":"=7.0.0-canary.730920fbb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SZUKgdOPZOIpWoOdydh+L/mqv3Hdax1HnAd3peXQIW2tfTeBhSYC4B1RlI1MniZtSkxk/vwgexHdHsr+6zYVvQ==","shasum":"15610863367373f0c698b3e96e09a9aacf55361b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQpCRA9TVsSAnZWagAAhBMP/3BN1Ql2kxZuoV7gCwWF\nHaMKjQyg9RJHk80at7RdOBRd/0U3z9KCs6MrxbTEPBGCuDl3udRbdVsKBp9T\nDAtkrqEvkTN2co46lB/G5GIxPZIis52HCO+dsefU0PGgdyvs9+45WL1oFjgD\n0C+xd4YWkU++9EsCcf6o2s8zRJrZuNAasERu0+gU0bpcNIe8kOWZh8MlGNlz\nhROfIm90Cieg4jX8ObsmgWDUyhZvOGoCnBy76nEJMUp6FP2ecy8O1U7MCr8/\nz/+6FZ0wz6PnQ3/wchsd4TbFVePDC2lcGToc/pSTIxJotavonvJCSWZ/ealH\nQzGl3v10DrWTdOiaRyh0gvvnFB2GLGmu+grmcZvND81z6au2GvuSuoj9rYSs\n8cXftiuojfa7IR/HZ7wptczq886dP+IiGu+AcPC1WRjwXG7+Zs6NqPq/Lnxz\nK0f6umvfO9OUR9pKrJMgMA8Pq8mYN2KvHJuJzDq4a/AaExLEu/GKmyvsBvKa\n+T34+8KLsBNkasDzl2Ffwcu07+ZOvA7dPRW9MROnNn/gTuXrqdZRJ6T3E05g\nuKWZ5+9dG3HzbKGQiua4fid+Iu3FGx91wUp30bmpbRcKfKbGZzSHXUVL5NjE\nQjVCTUb196j+qcTaKAr1IKiqgy1PxxmnF4qTL2uwqMLqkA7YVpxys1w9CbTc\nOxL+\r\n=mxIX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcoEBljyFkizDEA0x/f6EH3K6MeG1Jd6ZxgjWKn9cphwIgeYSQe6puiKPlx6DUMEn0gNMVBkucOx1ifdl2NtwbApY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.a564b194.0_1589842985065_0.4732188077766857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.730920fbb.0","@material/dom":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/touch-target":"=7.0.0-canary.730920fbb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o5aeyzM4cDXg9CL+1N33sQ/HMLR7kNs2IQaM16Y5pwxCpDQcEJKLvwY4MQXu9rzwMwsc94o++80xSGTFMwaADg==","shasum":"5d1af8b28910289aafe3d167ea65afe3d4b6d615","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bLCRA9TVsSAnZWagAA7bAQAJfWwbZspLebZ6LhlNGt\nDuYd12RZWfd1HJ0hCNDD2n0boOOUFOo+AcFC2wWww1WYnx2dUMHmN3VgNMQX\nkCz5HCF3/HPUAxFLumjdUxL7HZ+aHqAssQMGzB5FVFzDR0MChnybP25R+jPO\nk3+dg30ASAXOv81bMQ4ZdwTnpRKiCQ0IQJ12IQZzM7vXhhIZswFvhLXFw7s8\n5IOWbwD68+BQ2VXsUzdeaWpJzgqUewInw8JH0FNM9PeNW3IODD73o01j60jE\nwERcvC3JkkGl271bZhcLJYLF5rlGfU4xeaF+sfCzQJqts2pURbLnHtz1X0By\nPy3IMxHEb0hhUQmX5S1uzcI7jHv2TI6lfq4chzvH7dhTOrk2SEg4K6eqcRUY\nkuS2o9lCReCMJ8SVJwtEJXpko+yDFP7cyqfD5Vb+M/Y/Sde/r3HM85M4ZHKH\nuKnEuFfcebXy4Ro5TpyFdRBpMQbMpXuqNQtBY9kMl6DrDtjDkQjnJz8PKIsF\nL3oVcxIV/fmlkVnFC7lMTjhq0syN3rM97QBcHzJp4RzPxf/xyaFfdclY0Chw\nhj1HZKuMNGnHzC558wNgN8klMM6hSjZIwvvK6gTMEVgfCMkTfWc+V5cBOe1h\nOjWRAh3yGW6fA1jbYNYBvqY6qmLLvEAGZHmqILKlhL5sRRByuxo3bm4ipE0u\n4R7K\r\n=uYK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTZ6xA1rfsOwxdUpXSYJ5nfFs80Wheuv/ps14UHxf/tQIgbdpA5wPmVWGZF0xjrBbzZEUZTpu0FfQdzydWjDKud8o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.ef56465b.0_1589860043351_0.490423353697536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.4497b86ed.0","@material/dom":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/touch-target":"=7.0.0-canary.4497b86ed.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ika/cGZakhNO7bMw9kuxWjTBQrcgNI4i+9utj+7cuHvJlHR2HQN5qqAoECIGBjDNGpOVOtnZv0HuZ2IgObf6/Q==","shasum":"88b6309be593ec5e26cf9630a106aa1b50f12228","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBYiCRA9TVsSAnZWagAAg4EQAKFaS7eaGYUPySWELqeG\nD4d2fXpmWirNug8DqRrXknwFEZiJWxEmTWbuKc+GgZRC4Chp9wo0RFWD8hNP\nR2Ux+huz+3/1hrnNEULigju9fmvS+y7whLnzwr/YKsunUGOeQk3SxNV4vJQ1\nMvT1OVvSC3SBm360Em7i+rHf2lfJhox51Jwgxf1frifZB3rRnF1nAhVUw6dV\nG2y6XBawjQ2YVyYQBBbagmkVL+Vzf0LbcvNDXI9/pDCPf4a6WFqiFjWHWiQM\n8bCeIUv/xmQ7bjD+SgA8B7scJhNsIa1xmEEPAjz+pa2bi4Z6ECHyIAM0/VUJ\nRsxbmuavAl8M0HyMQSr7MBsGwucXKc4pBiCBGRxP/8jblkgvUxqY3ntwEoTT\nQv/cYtXesbFLn6B8u6ZgkGJlT71CHwLvIB5U3MZQzDHWL4rmZ9Sn0QCe/ECb\nBYl+Y1u5Jfil2EKDc4VTb25BJx3N+R0LcTyVPasYCt4CBagCgs0lQpNvdxVS\nLP8fj3tvAFOVgwqdlsg3WhHilK/E5Npq7QMtTPZjhOrzcj1K+5m4A+pOvffE\nvSALZzJMD6DtNz/vBmz0UgA3MB+6dybcZ/r8BpGn9qnZqEUphH22d07qeehG\na/HHXYpUOl4bCrZlhCYROT4gtmtmL4OGWeSfmNcEndRNb0E2xw4l0yDbvPdX\nJqib\r\n=F4+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr10o89whLRzvlVZRB0hV6aJ8afukRlXluP8u47BfqqQIgJMMT585sG+0W1gAK36pkRC5Rj5gY0M3MQJ6NF4BQY54="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.c22dcd71.0_1589909025841_0.5057707389537391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.e3eacefcc.0","@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/touch-target":"=7.0.0-canary.e3eacefcc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9J1a4+oVvan+dcmdkMHfFds0hWwwjRm+wEqKC+Sb4MV79dLQAmB779uMRSvg9fSCH4HRasqTbP4W+0qb+32WZA==","shasum":"c3ec6e19fc41c967365d3ec0628f84ead0a26ba7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOkCRA9TVsSAnZWagAAwA8P/jE7kd3j/WRUtJX1fKYR\n7EpANEmrbfCOuDJ9b98JqeyzUnH1B9HHNtmSOBuxYu+1U2ZzJTne+qJ7z2SP\nia95X/UYFBGcpGpcS72TYLzkQ4rBywWY+WO2/nNtE9DHLeNQ9MEnVwlrKZED\nRXk0PVVDxILgwgk3gjG36dcTtnW53yVDbQFHZgT6EMsQYM8e4MR0eMQCMZgz\n26okku5ZkhkFw/pFIt+z+cWewg3cOZ1M84wQcN8z8AQqM6AT1afMLo2tXd4H\nqMNZkqqOupqiU5/kZb8eRsUZYL0v2ZOebZVM+u5xknCl9j/jeu6PePVS/qVB\nPLmt0tChHtu+SC0YTlVO2fHlLFqID1o4AGgVNLI5jg4Y/tOgEMpZShmcJNoB\n1SRyeoRkPNlID9NGKIcWMLdY2Mn8kvdyf+UGspElFy9kM0rmEbxHRrwvyw1K\nMEmF/TepPsoxpXGPpK0RlMQFw2ZqwiQ6hrxbma9FJ6QDom886Q2a1oivxfEG\ntwK7umSWb203/DsVisfcQuw8acgvZZEwV1WOdWksXuFxDN70aHo7BGcjd+DH\nmM0zge3PICb4sIOZVa6GfrBRearh0Yq5ptAZlM2XaioGXIgVIZo+lsdB8b6g\nfe501k5QgGiN7lW+BUZkJ9v1Z6XwDffcZ8ITB2zdT0ZC7r7HYji3FHWqk160\nLbTH\r\n=+6L8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcyFpCgknh9FKYfxMea5oo5MxkJZwdja4ZYDI5AtixcAiEA5+fOmIXbtYiFKSbx6JTl5i3OgyKBNHUdBongeWsZKEM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.6eb62388.0_1589920676381_0.5981579666058243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.e3eacefcc.0","@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/touch-target":"=7.0.0-canary.e3eacefcc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zkOokpkkcxdLYB4M5zO30urmc6mJkHnvPwUmbJdH+lsieVYnj/VD0Th8ElvEseSKjiLZYCLXCjRdCujVar3r5g==","shasum":"f5fdb00c5e7c88ffd3861f1a36a662fa994268b1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFGlCRA9TVsSAnZWagAAT1QP/16V7bCvKJiEBFFMrR0R\n6OC2ZRMEatviSWFaCZ23JJqd9N2DnC4KSqtd4EENdQLg49ZEeLnsa0oMjb+Z\n4iPVeh6aaU+0hN4K2/+Cl601mV1gmHeiPIvl0+pLGlSugJPMyLBuQhoJQUHU\n0Dak8kiJwgachA0A7nHvp2WJ9RW/sirKMJJcs1rvhbSsPbFm113GgwCpN9m4\nVTwIGLMsJPDwJXTcPX3YpuLUqOsyYJbd+ibO+DI8SZZoIgis+dv5m7ia6vaP\nbCYE2RBqVmmHifCZ0X70/5vtiRKvxfDqj0Tbz0PKI2jSUOmZL6AJxzqN9Cx5\nnQph+KgbAsI6PG1qqm3Os/Ba8Kcs3OsmnE8XcLChg3dUCk849v0a5ANRcOOI\nQB4f/cQzS0nKBv+scy+EPecUUA+0eW7Vk3RBbBzbBZVFuvbaNLrBfub7kE5B\nbqZBLNORr/jUQE5Iauq+h94ttCuQkqZxfozoSVOfSizBwne8JE0u6xZxzAZ/\nRbTR5nkq+AE45hikhoYd+IRuuFZc6z3xRhTuFpBFV1Jv+UbW8q5E2L475eH5\nt4hI6owZ6NFaOvqOmJ3DNSvU/qxOOM3m6um1H6AxnZnl/344HFn85o3YdPSF\nNfQrfEamcdYwJc1EAENJ30C7xe/HPf9+Mi6yE1TP3OeAHjvhdZnAovx7LNz8\nhEx7\r\n=kICT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHof4mILaOGoKd8jnswwJdls3Yg6fO402lBXOSscPyfqAiA4otpDpgEBh5akKE78iEMkUID1F7nFJsrJmzh6CdRO7g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.9bc3230c.0_1589924261152_0.25374873682481214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.e3eacefcc.0","@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/touch-target":"=7.0.0-canary.e3eacefcc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Bq7SmjzAw7WpI12T3gxsQPXApwlG+UGOshIXS0E7bUR/BKsPc64yBFiyfK2Je9zy00mWKeZVrT2XcsUXbLZinQ==","shasum":"137511ab966e7a24a695a8ac41ce79dd97224c89","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":114463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7gCRA9TVsSAnZWagAAH38P/A2pVtmzZ4odSltYdYzj\nRqApqjsRqTXd1Lh8M14W+YYbRI3cb8LSuwVW76g0zcgdWSAOLe+y84mLf23d\nAU728ZoB1R5hX8KjyLURjRuhCxkQj8Nyv6VQCckA7kPjggz0pE7C71t2M6xO\nPqjnOZraOOprh0tDI93Ibi4GASdoN+qki7iv+EyZdJc6wgsTg0/BOTEe+i+h\nOcuvqa6exrCMlcLRJwncTCNp0OBiKnOtkOHNG9GOWCanpRQtvEVy2whWt5Nh\nIgpGcAZa5sx6aev90nNDSEPBuah30ro1kWIwHP4WmbL7t4X7APsei+OBtvy/\nunE0fy+S2FB8gXRuFnABwfQSdTCXgkeClyAxPtjxAJf8bn9Tx/61MV2paE4K\nGw5FVBZQNgqRmjq2A4wzPiqZPvqsIwor8sFMv9/nlrjMnPT/58N0syQ/ZRYj\nT786KvrrzYiw0iQ5U+ZjSfigsqNHOToXDoufeaIvTqMQNB0dLBJnUkGe+4RA\n0TxTElNQfbQBKqgZcPSfX5kV/V8W8h//FVVcirlmr7UWlefvCyHLJkdff9Vt\nyZo17aQ78PHqmqyt2DviOyfnJbpbUUUstolOvipO+aek7OoO6OVu8uX6EKy4\nW5HdicePGIjkAGu+avYodB3gFZh5VqUiyVVfqhau+5ggbB95xiyjtly0GVjT\n/Hga\r\n=Z/GR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoKvl9FlXonxkjnNUZEsOT+wLNOrno3MZkJbfVSuC9qgIhAOR5DT9NRUzsp1txA+AaQmKLfwQvAS79xlTOWk8a3Dig"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.421a6856.0_1589952223797_0.5346590434720819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.e3eacefcc.0","@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/touch-target":"=7.0.0-canary.e3eacefcc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WiFu1YmaQ+QH86WSNxDsJAZQL4ARHLdgt2/Ab04WBJ36yk1jFcbFE+rc3+qHP8venwe6TA1qn1A2fItRVmPaZA==","shasum":"1c6b22695d0bc62971a1777ffb5c68ea6519a888","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaFpCRA9TVsSAnZWagAAUS8QAJVQbXhiSaGUBgFwAhcI\nTEbDHFfxfkVBgko+R3fvh8CGj1UZsZh3xLvp8gqocrEwWloLXCxpUDgGCfob\nGNTTIwcCHGyktxThpsGkKY44timBFmocROBZjY6E05HEfFOW2OLa4kp7ZG/j\npmXQwfwn65qWuIcMWBQF28C12nRGKo+cvOKFo8RlhXQbciqMhplZl59C60k3\nrWxb+Wh+xL+0UTt5XThs+CFYMORUtvMCZIB9N9CsnGRFv2YkkW1KeqmjclPQ\nXmhLiCRmBIbGAOpZ569WOQInbTkBBAyXJH5k9zbxFN9tSoO/hpifp9ExbRZu\nfbbNi9cgimzEgAmrpnCMcdOBonXqpO3OsEA+jgGDdj0dHgM0Of22jHadTiOc\nl4AO/UNi9MuvizhUzzxOUD65N0+Qtitn8odRxZSYN+UbdheD6oOm0RWT14on\npdoAD/7pne904uLOnXa5pSEa86ftlLI8yMLNka5wict/tR21Vs1iOeuHK1TT\nsUP7uHUBkSs6NB8pLSDMABivrq9yiGYjk7VOziuHdm47uT2IXF9/aAxyqKvw\nQEydkm2n6bG+Aj6JRXYfcmSlTqwRer1EMbujGrCVuNoCKczNssb+Cx69iNs8\ntQ1c7zyBJ8PgtcvonN23lu1F1+jtqQEVFGfCR4N2lEZHOxWdHiBo9Qabz1EV\nVgVD\r\n=UAz5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7jmQcZyOVITc8ltgKhj+Py7K4/1wbaOKSRJZkTGliiwIgHTlXqPkgN8UdKxvHTSKwm2ykzfFBdb5tQp7GabDjEDQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.761aa6f2.0_1590010217532_0.7969477961042906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.4ebce8d78.0","@material/dom":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/touch-target":"=7.0.0-canary.4ebce8d78.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Rladm4c26A6N0iogIVTTHTy6TpW5wxMeSgVjiafZLgHq1+KSu6iD0veLPT0zMWS+kOYnzha4+0BU0LUjqWe2dw==","shasum":"5be6a9a58ab0401597596ec719798c87ebb81333","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaOsCRA9TVsSAnZWagAAFowP/RbYIBai1i372EnS7Lut\n2awLuTJsHjen2eAZkn8D8VpDLyxS3KciW5L3q1bEEO6QTMVWJmbboLmeywZv\nAQZ9z2xPv2VtwrKxddZLnTxCfqRgNsAMPaiDKB8P36KptOE49r0xKfNsJFJF\nqqza+O5+xWkz1l48linVvokHQPKFE3bkuJPMOr4ditRVkPHwofZqqoCMQ+qy\nm2Jtm48mEEg3faTyJ9b5jNXJC7RrtKQ4cJcxrZHJpOVLZw4URb0JLvk5lv4x\njuScLppgMw8IId7g1GMI2WEm8zVf/1w9gRAdjDMUMNoosaRzF7yA/q9yoPBM\n3xFvhk/d72tv5YiPx07R0nWVCKbX5SenqRv9PdDqofDjTfvXfnqbbhKjz9Ef\n2+jFQICBcHgvGtHVO2AUrIYE8+D2OnMLVKKQRVCCj1v5IDWHJVgFPA9ugvcg\nJ8Z0xnOBTnMaN8xGYIUTWYQXLPMl2ATulV0wG5+yPgmjDZLKBhyqQn+khlac\nFCnxTYLePIfHMcT8obzMp7OBInA6g7e6dNUhNJzE6Aal45oBu17SfPzNHMDc\naW+MgJ+JJZebC6pI6/7GsLY+1IzzEMTGpTAl2B6t0u28YYQzNA/aX4EGbG1K\nUpdX7gzPsD9wrdppa4Vq/OWWXAMPsIfyejNX9rkfL4bVGKV3GE7u0e0Dw8v/\nrJYV\r\n=GdxM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlNe6b2AQuCESSN8Q7p2MpyejoPC44zVnPqlTX+I6raAiBesSIortz3W7OeAUsjdF0nGCszYbQuEVg8uL+w5r2BOg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.f8654c40.0_1590010796268_0.30252816627266266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.c67667e8e.0","@material/dom":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/touch-target":"=7.0.0-canary.c67667e8e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BUfHH+L/6dpFvBG+E5MV5OSlgW+W5EElH2RcC1sThL4T1otJ299ws7xY8bg316GEemnrBr/XTB+dxv9V/jXV9Q==","shasum":"5789f993b8dac56ff3033258c603b196cd85c187","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrs/CRA9TVsSAnZWagAA4sYP/0/yartFfNNDnJktCZkp\nKmw9rGO53gv2Juu/b0Wb/+JJLOYy4moP7ImLJJEMbancwyNzleEzo+xn0KxR\nA6Hxi7aulUIXg02L9JXpmN4nI5Jh7CnXI9/Mj+c3D3w+O+x/E7vJXDhgppgs\nMHukvbC/KBNfB2AsCb391bHRODFRtwbdgk/RyPx7Ss2mnki8LioIuleXJNqV\nKswa7LtJ5pmExdO26TNm2yDJ1EE0TdHRXQRc5wIRW5rKfSzyAocQOkvJugKz\nPvlV8wZaZOcNJf3Lg2iSa+zqq+7i6bROlLpXTlQEClgJgne5zM8xibWK8zY9\nRA50tFMfi55ilRJ9kwRBQOitv3U1tXINbebnSnC+D1zrSsTLlih61oJFgmqJ\nef/OXLzlJiIVll02qIzwMo9Q+Ax1eb417InZU8JB4G6LzsnanPLHLchvHZjV\naBPULpJjzHhZjpKC0uS9sCQMAhME1JsuOt2qX0fYLpaaHxgx+jydFLRSGm0g\n8XhTYXW6pLAqq6IFLQOVOpXZ5/x2Twpa73kFko2MEdTBvDcFqdf//kHPbo8R\nLtLN3Kdas2n2nyo21/CNcKx4x1WQClEGoEBUhCw+ECMbwWGPRq2xEVm7N4wj\ngQ+r1FyG6FZAGPfp3tWTbnVMtR81yM821Y0GwKaYjgLp4o7GQzo2pOqcEtyZ\nFdbH\r\n=iOV6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9orIaLWxITGaHmTy1ZkBPBb3Ppf0veZZiK4+6vTgM6gIhANNVbIkLDXcEkpqKz8ml5O5TUsyt0rNYp4AerSzo2fPF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.05f3853e.0_1590082366593_0.9083051616239148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.c67667e8e.0","@material/dom":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/touch-target":"=7.0.0-canary.c67667e8e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Uzs3q4mvnu/mAYQO3LoO+HOEqfadAOeBuZJDlu71kKCscOmM060rmFk+CttRlu4s23N3HVyEMnD+5SnzpZ+GPQ==","shasum":"2fe1f49c3c0712cafc176ccb6d86b36a7c20b15c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwlmCRA9TVsSAnZWagAAzYoP/3HUNVWApqVze8nT1gVi\nBi+fNk25z/T+4A+tfoU5V7axKJTd4U7vv6fRMX7lIpU/l4HEUeiUQlYBLVft\nY2QsZxMNoRlHHBC2sPlV8eUsEhxi1MJqc08cw4lEwd5QWyRUfewclaYKn10Q\nQcGKVY6Es54+vTIW3Z0zw7J3EcouZhNmUSPI4p5knTjswt17j5Sy56zO8flm\nGln0LmQmKIidlhce9JJXi1nHyGjgj0vmF69mU/UiPxDJYP7+QiHY2fzsTjFl\nyaRAg8X6Y/9gvCf9ra6l8Fp1RYdx91oekO5tplUYUN9ebZyft9swwRG9xGIL\ngbQj4k3iecwdo0IkN1TUMMW8kG3wkkPwIk7LhW90In61KZrAJjcWqKrb8ETP\nDCRv/tcw+gtrsr2gPoCz/S04+XtDWcvZuDZpZhQQ7NkqRl0gmnuWkzoFFvA+\nMBehSAxKItWUX81KSSmz57+zEk6ronqlH4699AXsJZpTgUbhL4Z5UXVZlSJ2\nSKiAOPQGYB36Gzd+m5MjbVkj6Cx1sOW0kRkHvTAdciCVdskDUZMhblChSmbO\nlZZ5qdHVErT5oOShkPqSIONEgoRiPk9uaLOXyDHBFJ42I5rQHiyXl9ZXRBBf\nhoQvwTe+ulV6neQwxdModDlFYzP8v3CoSx9elVBp6LeVT8QUfXSj5nniyY03\nedjh\r\n=1EqA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+CSOQb+5F1Ewh51bkXpNu7M21EW4ZrL+vjrkmImyetAiEA/JPBXdyAxpIk+aSU+OJxcfAPM0gMnMzlci7hZTcHsM0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.5fe61f4e.0_1590102373765_0.4833424688076562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.c113fc942.0","@material/dom":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/touch-target":"=7.0.0-canary.c113fc942.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SF1Gc/A8QKe2PpPQp9WIxq5m3G8kI9pnUXr0DzxoaOj3KPR2fPgJ2FP6T+kOfn0waiIdhN83pckdMraJIx+75g==","shasum":"47544819977ab0c1495e36a8af277af3200f4332","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUAbCRA9TVsSAnZWagAAU4QP/1SOnBPI4fRY7xDwlldV\nggxekuMlZLEPWfzlJXWRizDMr2qAC/gu62dEdROwJN2BnErmR9VkzLH8c8NW\ng80p5KpmFdUpQWVC8Zcb8AlhgO4Ks1iwVp8Oo733Imxqcas4jtNrN7WKedpw\n2oauK6ZO0ma4+KRr8QDbXywxY9/HKy8yW2ZUbuVM4CqBI/YqWDlzaGZMLM3u\nggKjpOK5Br/A/6exIZIMWBkQVtJ468eaVYAi1eUdrgGurmjxMkeJ25TH4+vI\nwIp1zr5c5Jfyhu7Xt75eYboDynCjNRDX0EWwGM0TJrSu3sNIpMLBZOrIniRJ\nkkrpq5m/RbNYzhfm16YnnNhpswI9ywLgMQ0xdZtnqpnfocV6zgEhBNt860fm\n4YRXKKARRgjmVyt0c77yx0ZsZHompEWvLuci9dnHUYRS7l+pZSHDpl9CpmYz\nMp/6POMVhlejhKPVHxGikfv9T5g8TpEx0AAWEPPTKQ2v/Ot728v3tjKBJwg0\nW5o0HmFYfgZpXfFy4x7iCIPLpCvt3paqQXmobBGhU2mTnZH0tt2MM1Eiv4JW\nzDNUKqcibmRWt3bFxnXMvS4MXOymwCGUA6dnSRH115JfiGTMfFkT53lGtEW0\nz7PkWXlj+ukLgJ8bGJmgcatednVgFMCnnthafKf9WMJwK0sKxyzIBg1cXju6\npSsC\r\n=YgWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICB0jer+z9vwI5sEqPfQwlSoZX4TFyu6zZixmm3LxFjoAiABQSo7K3RNpZYwGT8G9F8Yv5dnZxJeSEHrWJaVsiaKCA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.17d33745.0_1590509595115_0.8680513525966171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.c113fc942.0","@material/dom":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/touch-target":"=7.0.0-canary.c113fc942.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ujER9G3Uk6fzr01uIQG2jkjhuY503aRXoUcpE7UjrmwZE9kZ44zrMbs0KPwiGJzZQARD3w4a+Do6+AnqbsFGOg==","shasum":"37ca835aa744b2a621fa83d9141f174a8b91b457","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWL2CRA9TVsSAnZWagAAAPIP/3sPn1cDEH/djr4d9GFm\nEp6dUTxzoFdof5R0fxpkRt4zPatdwCxzNlhzgSB+IuvpJytyq14pXTR092ZG\nKOL0+1/1pkxHP7dQUoN8WL0zLtm6G06BXSsZ64EzUde6iv3MKCw2CMCdx0BZ\n9EKV7Ytdqc5jQ2Trrj92qCKcPKu64mo4l21BrD+e73DNqqDBo22Wisu7X246\n3wL9AYAv/k/GZnnYqzvNAw7DwF442VyyzTGBK+SRgiLAsWHW/WrrVUH1VHpo\nkSYd/CKtrWzIJH1ewxCTsSqefLwMpQhFEnOJ1RCFfkAtucDqZQx4bVhkVpzj\nE0D3bltB/zJQq52LODfL6DYkaQmzvHuEmj+9Yiv3LoF5irgrlzXpFpJ2fnfr\n6L0j3cpi7mtNBe3bzIWhnKSMkR/l6m2se5cTCa4wZubwloWOFh9s4hR6x2tb\n5VGmN8AsGylqenhcPO2dcRTbbIYBtUtL6St6CKMKMViaosR0CCWRAmAjopfq\nKkgec3w3Q4hNGO8+bkJq84G30gHP8e3/N3ocDr3uiZxLat81lNy2pY35+JsM\n91QRao/tKMagTQNx1zdBx8GErFeHFoXTxyi3nkGLBKCdYaFtoIWlugaZNk7c\nR/BoUj/q+fcAbcpOfTyQVK9s/w7yP1A/AqfffTvg/+zdnd9P8d+Tfl8CR1DC\ngwtx\r\n=uq4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHTj+FncUQx5KntkdYTe2ojLnNZLyCOEltzy8b14UvbgIhALn6MC7Qwb+KyKv+ozFLuMXcfysPj8skaMvSL7Rfm3t6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.e8b52f5b.0_1590518518266_0.13193921504964945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.01de07011.0","@material/dom":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/touch-target":"=7.0.0-canary.01de07011.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hDb6nFum3IxHVzhFsGpWizLMhLRdcc310spghrW+/F/yP7lUd+uT86Yi7J0PogykBqrmKNZxDvif9XRXPqw/Rg==","shasum":"6dc194ec938a50a04cef373147f14bac1453a6f6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2CCRA9TVsSAnZWagAA7a4P/iWOJwzqKjZGRkJemx0C\naoZUqRFK5sweOQxuOsbiJjZVEkWIPbJXtsXVcDmT3ZnBq39elbw/BJ19gWtk\nLTJJNY7bFQVlHOaaCzR40EwNV+KboUJV2bYARNaZwhtYxblKxMCcT37bSpDE\n7A7yL8IEqCZHKZ+qZ6Fiyolxo6DN9eG0pbbdeg8oNr5BZq+CMEnjWm7pXkVC\n1PhEJR2vggUw+V7m81XOYk7TiIDR2SIoj9CizMSqU3ZP3ZMv8KKf9OpEzhl6\nngnt6wEM8WIzarOzvlYPFh9t4EtP5xyvWYCZUR+Bl1QurtjoETM6audryXbp\n4qr+WBoGZG0+z5220/+m4YoJwiBnwq/MCfxPQThWEhPgX48Z8hkBMzksLED6\nEkkE5EUfFCVyVOR5uGKqG6cbK6x/SyHadRU+Kxn+6ZY2MwB0Q7CaFlpbF5fP\nQNk0EHKuSERpUmpaTSsZEwNCLeAPkm9FKTRhRJsQpFuGsWTcRueE0AHwuswq\n6zwwEVHRy20IfZJqZP0EikyYaJU0DVGlZnmJX3HXZI8aNxdeD9UQ6qNsW0Zi\n6CVkYnuQkvtieikwBSB/hyc+RMl+XCtEyr+1qOUB3S4AjAxP94gpUpF6uHvP\noFXmfdHJOkc6mMneYJ6knSRo9s9inzLaxumshisvbTnq+Kux8ya2BSSWXi6c\nGAZM\r\n=4vKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGi91m1pI0SdDJC1A006K1JEh/O42+DPOUABi+NX/yE0AiAnC9qalVSuhw6h8Zs34yLnIRy8E1CXXal/pRMFcI+ZKw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.09afa0a9.0_1590529410320_0.10830236904800894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d91794c7e.0","@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/touch-target":"=7.0.0-canary.d91794c7e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RMcrXlAOhD4Eh+grTEBiCwXjPonX/iuKoohIwJr75D/JX/u7SKd756/DyF09H0lvNJCujoQt/+vf+oPYzEEmWg==","shasum":"b33af81d5084ce81f915fa5f73bab8624bdd9d90","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbR1CRA9TVsSAnZWagAAhCsP/3TZ4IeuZgVdQ10m73ze\nth1drUZOnkbmFIK/ceeYsLq8UELGG3E0nA0hHYIt8QoJ4XO+Kf0Gz/pfmZfe\n/AcpTBAaDwnO/xAFKaA4zRhi7yMQ7+2kHg4ZdTfDUtMvtEsozAvRdUN1RurG\nqwzaW/o+rCmKeeJLjr4BnJq0Fq6ymBMEKjAWpby3SCDRx0PzcIWsJNFzPFIu\ngyVmW5jUuIEZ/bJ7/DJCpn9RpMjCGPAqkhLFjGRjXtLtbqDEbbc5Z1MnGVNq\ntkUGT4Wbq2UKTaE1NtJpN5wFRUMNcIyqdHi6QE/hyLXGrxrUG5zjEAei8vAf\n2KSXzc+XW5eWnGsWXjN3TygmtRy39Ltjct6arwt+VS2Ze3PjXRYvzi1Ecynk\nrOhkiMqznNbUSBroNpJzi56vr9xrXi4ylT4y5L2HDd3hxkBtd5A/9kc6JCp0\nNY4k4RQ4qL+Md+FXInYvBTOGokRDGfnY/A/6ytx9hmft7Q9OQ2ie9J5jBDa6\n5P+cdxmVzRFGi5eZoZvsXdJAno7JdTcz2kRfcyV+LkSkc8RCYi2OAo3zjkD9\nkCy51d43s1RbffT50x+rxW6t7CRkXuKPCLAeGukEHwH/pK5vvrhyI462N6CE\n/VYtNqEWJgqaQWNPD4Gor3EHuFR21aDGMTZPQI+pLiqsiQGMSqsmniotFzZs\n7vIa\r\n=UjFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5ZzjP6sp9YtzCkDw41M09yhi3QeCQLp9mk1KvY0+KFQIgHXeDVA18WwGK4jX1t7wAbHdOZ4MOSzn8M5iKMYVM2GA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.58bc9166.0_1590539381092_0.5470620478606314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d91794c7e.0","@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/touch-target":"=7.0.0-canary.d91794c7e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QTEHkCe2ubkI/NRrqmvkNSf83Bbnm+9812dwB/SZ9P/UVVXb1/DMwxioCdUbV1Hb1Lkf0O0BC6O54q9aXJ4ZwA==","shasum":"491e2ef3c5222958ddeac53744cdffc4e43bc0f2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFcCRA9TVsSAnZWagAA64EQAJphhRS1jF/FWk4egWUa\nwb1BVmbBvvaZ3DgkF4bwQCkoy9CqyXzlgI6FZZ7CrhWFZEiug24z2nAfrW8n\nfqGLb31wtOXnNvM/2CrEq6AOiMDRzUZkwhr99kiKB2HoklqjdN82zSskm73t\nu8F8dR8PoCQ3nBdzDM1s3GN6bVyUnzMvVMy/R3V2dDDtML2Va5e4F42R4vW+\nlrywsVX8tvTzLKCEdqdUZjjIZe/jYcMhbnXl4SZWL0qh65c4P5wg92hP+7Xi\n3OK9XdyhShtrjtB0m8MH7Hg9YkoAhw8gSNbnAkVB2x1vPd8d9HSK+/BnHQOV\nkG0d5TvsXE86pboK94HuwCKxmqr/Ammx/SGDnumFk6MVKcaj8QNSX4/MB8m9\nd0VV8J5ftYVi2iE8fgjoTTtB+iTFYghdPVMYkiAhX3jcPYtrZXh6sbpbSflE\n43URkRtRo7Y0NUDCRBkrt/nVNGVDzd4Fh4o9crF1GYqxZptWrocoh6X4SiQa\n76WNHNB8Tjpqr8vSyPY/lgCc3lc4iHNn65ITxKeo3X3miMZVIlg9aeiH8IZk\nZ2nt45LjAofbsdKLPvlI71v5gJoHigpnqgBgRB7vwVzhmoMwQvE6cAJCr9t4\ndMeZJO+Ts7ioLS0py3z2gejz3VL1UgFamtvEkvF843PVCBULx/WSR+xah6Yh\n4kpt\r\n=MnvP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2kwXT4wup67W9/WKxFvutJzbFYLbIE+Rwt5265HxMJAiEA189TKbeqUM5tRD+sw6rpg3hAinWzRwapXnnNTNo6W4U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.43bde144.0_1590604124080_0.30333841489650437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d91794c7e.0","@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/touch-target":"=7.0.0-canary.d91794c7e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RdgFwyqcbzmLrm24xW3RRu4vXrHSaxlWfJGHr5rDjmvH4XoyMSQZoBFiz23ZvcUtDcSdL2pxPhb9rV7qYwkVZA==","shasum":"6cb9e9492794dcbab61c0c56fc59d8a6942475e6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsdgCRA9TVsSAnZWagAALmEP/A65A8NuTxiUWmI1IhK1\negbKvIRN1CNzHwqL9ZJ8xIGeRYl/LRH3iK5S4ST4UBnZR5Afoq5+QiaAhMTa\nMYN0u1g0bfE6X3pSzCtXsX/+a2w5E1sftcGv0Lvk6NVTxDZPusmjMLOGlsyF\nY8H3yKKQT+uPph2KQFgbZlzF/5MtpC35Hueg6PEXaAc2qHrW4NvQ94A2jOcN\nXcspt9ofPxyKRtDSYUeN0ZcRbLrUwJ6H6dKEg8A5mT+OKjcP/Az0416RxHXk\ntjz1THvmUfNgmy3ef69N228s+VF+sBJzSQsq0FAo8jl3hsiN1rWo8ZF3oIrC\nBJohQJKOh+aOSCGuNDHGImuoHpmgJjNOKE8bC6EWGILX7AtIMaqd36066ewu\nvR2DLYDGlAjN0c0HYwd0uDswkcXTx5Sbf65vyYZueyUKmX7CQWwa9YAhfnvl\naJj+o2+DOSqY/90q2+qu4j2NpelUijEFTNrdjhR5Cy4EPLNDkU98UFy4wIuy\n7MWazfgVg8CyQlc72JxTppFZiMFSxV4xYXz0Di/NR5YcZzghAvqZuH02fqnI\nCGOP7XK1Cm8EhoMK3WKVQ4ExKUaA7rY9GgLalRjRUbM6LJK60IAeSwcMGCN9\n96muEeophPP6Gh8eeHxQQOAnXCmb/GODZXxK9ppBotGrVBiSiJxDVMJr5HHv\nCAD+\r\n=+enN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkAcJI2gsar3GReiFQj+5gI0uFa4Rm7YqaFf37DbG7dAiBl8S/5ZsqGnNcbqUHU4vpgwh5KqRFJdqNfw9dZHjScRA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.51067bbc.0_1590609760237_0.001986380256560283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d91794c7e.0","@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/touch-target":"=7.0.0-canary.d91794c7e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-h675Okzo9SJRMSMlst4SM6HcJlybwEzUlrKLf+OI0zEx4joJSi6BMg+bfM9mHK0kIt6h2y4i3jyCeHD0Uo4JXg==","shasum":"8406154d5014a4637998ec94ee7ec665c2964fe1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1CCRA9TVsSAnZWagAA6BMP/0kJ7vJMhhnMd8YwPWTq\nWuqG2mucs6fgm8YJcOH4FNivjCJsrO6P2HwpoF63rUreLr7dGlM9mXpN0Zo3\nElOi+yXZPKtJdRnNtfyoqlnvTSML26zgDaRXQXsxSvfxU3hTiLnQrazWmtko\nZy68cnQTnxccIjngoisYuWTFEdxV+YsUarSzVPO3u32k/dYGT160o8zeMcBA\nKQPF12s7LYjH/Wx0jr6Cn3a34YMG7BSbBlPBuZTD81PNBd3bBi90OT+IY2ZJ\nYl2Qq0v/AfZrnH/TS0SZUe1Z2rYduG5wCI+yymEThr80JXuDsve4Sszykva6\nFiUgKO4AcwEx9tqSf7xqk/GhqT92/nJCXJK6wCKMN/j/cnAaMDpbnjG+parV\n0VCcXCWeLuQvbwLgdpm7CLMTH3i5JBSbcRnx34FSh6HBg4WQYWt4d9ZiNfkD\nR4gWN1QCOWOvpcYrDoXbeyDBsCfDig4FzvBDDQ2p/+wJ/wE/hjOLa9CyAtsm\nKU2TVBVxdRc1Q42uqlQHu2MRi8kzq60NJh6ZTXaPh98r4IS/S1Zqw2U6GlHV\ntwtapTUN/GEqF42Ce0/mzsNjJA8aoQiXRjfuACmLdZ4dbFt8sgRKPfZPdQHH\nVnjbeSol2E4MX1K8ACHB24ALsmHlElw0YaEQhpGcet4QOCqQIHm1oFJDANW0\nmn60\r\n=Ljbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSAVwbN3NQMJjCjdfOgLWh5OQaqve+OnyhjrgDr+mrRAIhANni3Ve0Ffcc+bfC+QN3CxuxCTqCxtk9F9hiUoFZJ7WY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.92751ffa.0_1590615361860_0.6741630272515107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d91794c7e.0","@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/touch-target":"=7.0.0-canary.d91794c7e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9IuNSL/9Ni+kIvRS2t03d0ZJp+AW7GCkSCRfj9pJYMZiK9xLpUYn/IMs7sEHJ+5nfZM2ZGrnPVeRgNGPN8/Myg==","shasum":"2fd3e172147ab921f77f0cb3cfd7d6083a5b50d2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2MCRA9TVsSAnZWagAAUSoP/AuG89Q0Z/RWhcd7gijR\naweCelaTuAXnURvxmIuQyzblFxvn1Yt729CRw7h/M6VvKeypgcBQBIROkVSv\nED3JQU23UJcrg9eguhqJAgpFRO+DzLM1m4X8p3SAE0jdphrdGpbbPaSwMDUO\nUM5aBxavONuWkSoew5onCnhZLRQjpyEeIgkvSrp7V7Lm7FITEYd9ZNC9nIr0\nmyTNlgFC9xZ3K6fx4EoEoVV9UAp2IF/vYjGfsYlGgSNVjowJP64YOSBoWPb6\nJTOXaAjtEBSafqm6cu2n7Rz8sc+JSZtBqFt0H/7zAUicaGdEPaHOrl6j5K61\nBFlM6Wx0nUE7e4PW76U0lT0yUz2BfW0r+dpkd/pbvNmBU7PtYBP4wm44jzMh\nVy5nD9jyXiL3mSNOcDXESD4WRt7DZ9Z3i13MziAqczjC2VmkmjAF9YW1P/Ki\nblyAS/eUlEDG+odp/MDpDCzhLd0AasMwpb2uOrmitEZx0osZ+tX/WjoueSIa\neJDWBwsTTbpTv/7BrBkbVK4pn7N0ZSDps5vbyph0PRig/D6CeT/pikUzzwH4\nfjesr4jRHjNVI2mAweYQiJw0MFWQXnXAdQnmZEzWgrwXodWBpptz2bY4tejj\nsigS/8UgOqBCAsBs/hk4HjLHrxs7HZ8BsktE+jAiaUwORYN5gZxtLs1Vo59Y\nDlTg\r\n=0sx+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBv5Q8MwbC1fCBzI/XRKDCbyoAwz2mCXOrV4VLjbpnViAiEAv4PA4pms2jBuUUcZk9Usfy1hjwd4NeIipujLcN67i1A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.aa2b40bb.0_1590693259944_0.7464401831637617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d66d22bf9.0","@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/touch-target":"=7.0.0-canary.d66d22bf9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JJcC4Jl45f2uI5BcKOYwGRe2fTiBHlz1SleMuv4+H7XqdSJ8sn+YUGhJw9MjnqZknm5fAiYFUFyC4OWAzn0yuA==","shasum":"43a7f9776cb571fbfb962be261688f9efb4368a6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqQCRA9TVsSAnZWagAA0j8P/2FhDniA9T36BZtdtmkF\nAeJUvb4jmbk5u22jXo2yB5Ef3JPw6ipDg1ooS+HahCmPqGQcm+Wu3OZpYhMW\ne49pZn67KL46QWElOvy/BUaAiuEh5RIuQ64FXEIw/Md8AgdEg1dX7dOz6VRu\nxSeCM/3FLwmxa1RFVCoeJaH6Pdr/hFh2n8NSxUf1jmEFXYSItFjQmomplM5u\nsIrVBQ2Tmr9l+2YawpmnF94FqIsoZB2gGrdBHz8Flbw8doWZ7vnJOf5TbUwN\n4qQbxmLSw5WPMqd4UXlH/L6w6jGpiAT2mGhBpwHKxSEcjRxNEO2wAAHATKO8\nuo87Yz4DIZAAITmbOl7T4X2LKHgNGhQo4WY1ZtUOJnukLW7hq17/RGZtUP5B\natNeglO+sA2tWYOYLYgqi42kxPsfaYRnHZ/SQ1hfFv4UVsAEf4j1VAawxJn5\n8xbfpKJ9iKsVCypTNfBXzL0CwHv8DMamYjQ6F9HWMfg3nHdVcZK8zzqbwIff\nTM5fPPQX7qX3urhTsMfLP+XyL0FpzKi0T10cNJ14hxhECGtsErdMYcA9gFPv\npO8mV8O505t0nzdDs/BZ1hvgLmoQIJM6WZMUm2W+I/ybQfqznEr+T63rPPta\n1b7dImumcl0e6lkkiYlwQQXpUytU1lcxmrYE9xnZJlpGae7hrALFJtR4CU2k\nQ1LZ\r\n=/u34\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWF8NHucLGvCW1SfoKtStGjHIM1+DLCvw1pVuQxgQyvAIgOijflKOXEp+f+90sFINy3roZQVROG0EBFi2l3jaHjOc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.1a870a01.0_1590700687902_0.2135053597965304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.d66d22bf9.0","@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/touch-target":"=7.0.0-canary.d66d22bf9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2j7otVYR4eCvCLb+kMq5zIupn78kMjj5xfseZruD1ypLY3i6PtQpACWbVJ2QdNaJ52rhtrWkGj1j907I3WLCOA==","shasum":"bc6ff9db2b80775109c00408b0058d9d32858ee4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":114788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9cCRA9TVsSAnZWagAAc0IP/jhHPO1062l8yW3xIqEF\nGwdHeKPKD1NYHXnhY4S+s5Mc1W1SWv24PwKvO6jL8MtUVzWOlBdIuIR9CC4X\nQFe4TVR3p5EuVNw+p0fn+prKoWtixXBNzKdGICRbrt6HBwCPG+HKn4MF1uUU\nuwXDHWIiVMX8EDPAyllY+cCkDJvneJTxT5B2JMpjfCLXZhvSVkodv1mWRQ7n\ny//4mbbA/+fwkArNj0rCYBcwsvas5oteqdmCPYVrAikpSO08VJ0erHWzebLC\n7MeNhHjktxjoPuy/X1EW8kEiL+HqX0ky75p2pApzqHn85BUZsGKR5SRKAhT0\nvAuNcaY88aWZHUfqQQLiwzWlEefEjhQft9VDomd9Z923wKUIv+vA5D7G+dBY\nRpLtr/vMN0lBQKGAd/uK1bR4kUDKhjZtR+V+tktHww3+/CwTk5lvLQRiC6U+\nO8wgPWgvfG64eva0EIFZ41uuCicXqvPEQLeQDzKx48cAOxZxqkvXXtJaXHBH\nq6YJnxJ6LhEUTGYCo4Wamx8ETxCf/4/8ut7LUaGXFU4nhX6ZotHzcwyO9yXz\nSKQ5ag1luGlBDupfvTaWg+Og0u+wRyYtGgj51CsoXcjOcAz+ie8LnGYe88oP\n4hx9vqOtSFtY4mjAukVWxDGKmNiEjAO3ogniwTKgSJV6lu4W9svnvGnafhQt\nhaws\r\n=OMOP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHz85YUFaNpwAU26eqw4YH4vnr2rmiYv+33J8SYwI/dEAiEA5ciCaWWff0h2PKOrvGDzkS7hzp8x+m6FaXzQH8597H8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.ad57d086.0_1590796124439_0.638782818807129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8073a20a9.0","@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/touch-target":"=7.0.0-canary.8073a20a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zs9Bf6GqksqzK2CPff4eURbZTXG2AzXWgEH1h9Zbnr0TIaR6HUTgW17JzcpiwgbeGfPCHQ2KHogE2GAik2TaIg==","shasum":"86ca91520217b6905031664b97a06fe38a448000","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":114971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ap5CRA9TVsSAnZWagAASDQP/AvLCRMMu8zNbGKfjFdU\nLS5ZNA0yQKEdTDaWpo6b/KeQFccfSsLxVbCYOts14yN7Hy3avmWRYDrUAbtb\nZA9+Xjxp3z4NekmZELDZMfHx7ia5pw0EJNlaI3roO03PXfe8QxGngUxAGd1n\nyveoYkzfc31tM+Nntr7+iyuYQKlNvsVYRgXn0fvotnrna12UzwNjVvrxdePx\nqSOhfMe22/6ynNg4CKGCEWk/BfvU3M4p1WXhH+WoPiMMbf023HYmiJ7v74lZ\nrj8gwOdVRtDGTc7NYA2lmOrr8nUat9KTv2Var1RqGBgfvldqub6x9ETU44h+\nMbMkEJWKWi9tKTWzcmkkoIY1o3fdFbwwimiw2LOTBHb6c7MajBh5EKCB/HN7\nU6rMcQs5a1LP/JhHQvsaerraFwnTVrMw3NqJsKxoCucq71zjkVnxc6v3SISB\nivrzIbaKi66kyrPtii+NGqFoYBrOhh0szwqOsVTWhnpcjcpmtvIfs2NOAek4\n+YBl9xU2fmUOgsn/Ba6vngywU6WWKZt9388raIPGScVb9QvFYlZ1l1g5dKs1\nER+0OX3hb4ibszrbpgQ1IJj90YvCrgVq9mH7D0bayKhU3hxnGa4fe3AQCx39\nhU9yqTEkXQodSB9bhVIhp3Zyt4GPD5PZTai4kbI+C+NdnLl77pexkO/HrQuJ\nsMOD\r\n=QafI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4xSNQItXHAwFy4aObmOMfMd6kfac60wJKKtyoNywCFAiAPUQHghICnTAbssRmrmsOs3LAXaJqYjWAHQbN2qF7Fww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.3bf2b4d5.0_1590798969247_0.4391913726004235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8073a20a9.0","@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/touch-target":"=7.0.0-canary.8073a20a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-shape-radius` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Sl0SjrRsmWb9Zc8ZUSN9aR7s6uUp0mq451hiRswEN9N0cgdP2P8UJpdIV63/lhuB7y/veIjXwS3hG3kOrSBEaQ==","shasum":"7b09b2678361594454697603b83a435b9b3dc802","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":114971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cmxCRA9TVsSAnZWagAAwvwP/jgLkH1vy01udwQ8jTGj\nMNwrSwly+yxbVFOMdnxOI+1wb3LFEx7Bf09tqU217uYASQlkUFd24j7cH6DM\n2wEozm55QB/UZcSjjri7SF/qWyFS5bQMMpubDqxBm/sGecrV6r7FKXwE9YLk\nckhvXVHG9rwdFI9d33ySXbA946mnhYRAij6TWqRkdZ3g76ZElbKtkt5A0s6t\nshWYmK8zX7mV9hh6fEQdqqL8MX+fZQ9lc9+JXdwvRJxufM7Ar7DNCWzsgvAN\nmLyq+uKZmBgPDvmqiMxYiKd1S4e2QcOU7aupTOZHXuhY6q55SwnS4uOa+Y1/\ngEGR55ECLlfc8QID05AY1n/Xm0dcFD44XUcmOCoNIXVZ5R3lnlpG/ETKRdoL\n7BxBerRDpJ5FODo3R/gDrcBV6Y5KpQPUkUmwmMy82ERDV1ZrC1a/Vxyc07qM\nwWyzcS4RoV3nyK1/MNjMotg5uzy9Pcyax/Tw4uCuFLYaIna0gv4qY2Uj9efA\nOAKTr2PT5sD5mTd530hSEaCm0IgB05z/5/N1pyTAGQ5Ku/INhzmE9Im5l1xh\nadmm7ss3KdBq68WdkwId2CD5T3N1sSatEXFEd3/XSP/g2PujifXLiSfscFlm\nT+DvQbO5UmzujTG3+MqLecFBZzCswqWB2fdFfDGi59lsIWYV1jjsuea9BvBt\nPPZ3\r\n=30af\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuQl1He0aDT+S42oaBGjw7CWR1QqeTqjfKZjnb7hGHwgIgUpCMOM6c6a2fzNJFSqQ6WPAJgSOFDFIlDVj3i3SVIvQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.ac05f090.0_1590806960735_0.29304026548345097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.8073a20a9.0","@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/touch-target":"=7.0.0-canary.8073a20a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8sKR+jOaY3L2sSPWZyeRdGioFHyv8d+8J9/2fJ+Wkizb/4Ht2rDbLrucPa1SfSzCzEBwbMRe1sPS1IrDDDXbZg==","shasum":"dbc9dc59693ddd163b405361a303da2c9683bdc7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":114619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctDCRA9TVsSAnZWagAAbykP/jI+ygd1Vmv0voIs7q1s\n93ST1JH5n/cu/efYMrKlVgw23Rl+0Ix2yR4j90wi6kwZdzluYydJwzH/hDNx\nG0ZnX0smVHYwZXCpHsVjyevqTlD3fyemw8elOFlcNQy3ayluXe9iHYaCHT9t\nqSq2WMgwF6DPoi5efm5Q7cNzjvu9LE+pC38EZVe3pwBBhhUW4Jce/wbpqHJj\nKeS4y0AGZprNgMvQ7b8QwD2Xx//ln7U+pqNJVOilhcxH+zNZtEUW26181REb\nGHZ7xtHVDWWkOaH0o/vSZGo3DGjVFluyOBxrnLmra7YoMBV4xdTHMIYx4XJT\nh90b8ONt7vVWN8L0RRoqnRPd/gxclM7uChwlbzN2HDvr1gSKCeD2LivGX58o\nRy8RnR4p366SC5rXDgTRm5+8N+JCmU3+H3VCWZb56Z0EMffQ3QyjUav9wWfX\nKoxMojRKq6nmI7b9z27715JMg7nZsZceas7t1SoAm+SHxQsr7U3VtsO0cUh2\nwljnGr1+71UWYAFj5wFBO8Ct7Lv3AAbfyt2/xm9+apFBf4HOXgFpTezl16ie\n4Ed72BjI6TBqYT6A+sFLwi6cc0LfS0TKIK8sddLSjQ4ZbPbf7jsy2zGaJUoj\nL/xGsblsxAmeNdRgpjCQknRgj5065Ubl7HNQMp9biv7SrGEG6EYsmsph9MV5\niUNT\r\n=Padp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdd2hveOpOdISTRLs/wjfNo+bYYCfQwomxhIbxm/ScNAIhAMoKOzDSNhV3OXNEUwQexzn6OxJiD4fFDrbt8jY7sL7g"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.0ba7b095.0_1590807362975_0.7312828691929234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.b9776b1d0.0","@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/touch-target":"=7.0.0-canary.b9776b1d0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kKJuXfgve3k73iG54p7hjMiz50o+/snLtS8lOigqfUFloCwpJ/fPn1bzLIKyXzIRF/hv5HDwK8aKSw6hhqQaJg==","shasum":"64123a171a2f6d61b6473a883e8a547f0cd32f5a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8JCRA9TVsSAnZWagAA4Q8P/05vDzsrQrHv/8L/ciLL\nJcifjnJVeX3xo3GaX9iAjNK9e3VyFUe4jArzR4Qe9bA4P5dcRxVK6beETo2p\nMJ2aVGtwzODBH4Hc1w1wrE9EUOliWSyxClfgRUazB1b4HUy154j0qgAXHj/4\nxIZ4Kv80+dljCsmKz/OgpSTrVeA/tEt7FAzq2MUbYoqh4dQrUXNWowItT8DU\nuvtQSEx9uJneQqyHm3ovIDdsfbLXiEQvN55YqhkL5MrjasrZC5WpReLmzFnB\nC9bZ3meVAsJE1St7vw799SD0zSUzPF74H54/+svhhpqhg2SaE04AX0mR31W/\nYcx/2RxdBczQ3C2Wf1Q7zxh6KlwGzXkZ4zuJnp7Du0U+FITOP9bOdK+A8Fp/\nzPUttCodzRutXNFv/BgW18WC0G8a1rreNnPcxxSVfj5ZyuC/ai10T+0G4iOJ\n6HO2YMAPmRUDneHfK6EZGp2FnxTUgYCQngC4YF5aQ/mz0Ggr94KlR2kRV7gY\nwneCX2agqJTrhR79jTu48puUWM1t2jiwPkQsBgJYN8uPH17hhgUHb+HLmDop\n8te3HhPIDo7Pir4W/cdDOM+jLtyZnm55O6By1Zj1i0NLPB5ZpdZmnaMttfJU\nYVS3js7mISxdm6s6RueE3VLvK0T0WbGzxpw73AA20wdbYbxNWkAOhhskiIu1\nI3sB\r\n=46m5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyqHsrVOfrJw4txXOrN/7RCn7fbp0WhbMPyJX8z04FMAiEAtKRNTfFVyAYdYd/lWfIF2LbohCg1GZsnUrnKS1qn5H0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.5eaa9bac.0_1591054088932_0.9882592195911073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.5677ac20.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.b9776b1d0.0","@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/shape":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ws5R1Zn+cTobswaXwS50zMVDB65VkBs3XS7VFVCcOGEe6swa9MuARtHfPgcjMKbG4/J8q1BkwGh+wTIU1yKcbg==","shasum":"94b6532798896a4a66fcb112bceb32a611e12fce","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZW1CRA9TVsSAnZWagAAB18QAIv7JXCPvPl7pnhCNKAU\nB4HL1BDrjH4gSiQ1+uvdG/9m3zxFPCNoDmX1REe1Dqa7wwbdSpdjiI/b2N9P\nLRn1I7Dc6TrliSCxRRitbwkyc9+DGV5mvS+SYHvyb8tI/DAqUaZr+0pp4cla\nvKmCWPqalva3lYBb0n4QDq09lQ2D0IXDAaBQ2IR2cy878jIkK39uZs29rx/x\nQajacoF4JJkIlS6R/bPLkRecGIixMGOhZe2kybJxGsCeefuPIgQ4eYbAWjpy\nRDs1sKovoMqSZGG+tmZ9FsAiD1sRa2BHLZYGXq8TDHde/F9IpxzKgBVishin\nTCO33zagFyjgrPVI3jSBYxagGAO5TpV2ytE/yt3gM1jtSfFkISrBUIHisvrW\nO47Pn5I+o/Cq6A32NWkXNvXrYALOHx6P+NA61wjNIszdWXkDMEpDb0vBzoFp\nZ02KEwkPR6sI8yQuE+OHCqfbGxBMPox6dKuIlggbF17PRjmUStVozIo6QfAJ\ntm8BL/e+HS9tAGiaxUOUalxXYqTBz5qiUIe9o3w/Xn3H5Sd2/dBZ+vSgwx0s\nb8ckw9qie9mZVX5MwoW7/K+tVgFopGTEDh63QQZ9mmPTcHXtjFb8jq0YlfQr\nivjtPdUtXPiN8FAECvOSymNbZhv0DcUDjuaRUOUuko1FhLl1iphFuYq6fAWk\n4jS0\r\n=loGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsIPq9YL756n3RmpUs2kIW60Wr4auKHpqev7tvmdvKngIgInhulXyQU2qC4SXqyYe6mMUwWUepBHN1fSF063+rpi4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.5677ac20.0_1591055797300_0.03251304142276812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.b9776b1d0.0","@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/shape":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vSzsM6CDW43q+84ZHs2K5R3pWRXdQ34IzsWjmY2dqKAVBE+x1Nr/AndT0vM5Cy/uRLfEvUcVkv4d6G1M+Con4A==","shasum":"eb3816dad0ed39eada83ade59e925e63c0820b67","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoPCRA9TVsSAnZWagAAn/8P/0wvq5PRRGB2nn9iuGNb\nUpCy+wd0xnS/qHMMCzxjgsrS1R43xj5u0KhFvsaxb2aC+ZUTdpbiIblCbTCj\noZCn85PWxQRmvxJ6Qinyn9xh68rqailUzwSMXYPyJ96Lrhg+JqE/px7KKQaF\n8arJcBPKIDSIf0b5UB6qlYtRzImmCWHcjhA/iEwbdmUI4q+MGe6eTv7c/YBw\nLTBmP9iE/+fLuZWD7x7RWbylYLLXAE37snz/W0KdmYLnS2juW2vb/TvSTGh5\nv7vrlO5rmR0nskkyphxTXQeHxF7Rr42fzubftLTUtqUazLip4opdlpkGFLnE\n5APV84DD/FS2LPWBwuVXcZ5JF7t+lKJp4EoRhgobSNGtdoJLMAGXo4bdTxRA\n/W0Y9TK8Z4MeC7xUKeu7eFBoDn9dsc8VzBRVjrJEW85qxNvQzTwr4wTifYnF\nljc+Uw0dnz6vpk3OaRc7GcEYF5laLbU4NMp7OxML3R5nyxMdnZKp6zpAMT0D\nq/LxkeAUeFo2vy4HeY3a5ugmHi8zBz/jAg8DasPdPVmkkOhXerfsKGXsIOf8\n1xuau1jU4DTCjUwJuwDvG67/fXWmyCMe+1tLzmjWAIWfH71PDLNvQOsClv2z\nzCtTnwd3YddXxg5dtmkJfW9H2rpG7ZvXUU+2KbuC9bUplq7uq3zwDrz27L6S\nAx//\r\n=i/DW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfHWYHH0s0P5ccN5zlBYDE6M+GzDbzmzp2xZ3838PH4AiEA+1DmJ5EBS9eKnK/ilNhiImdt5i7tmeSP+7MjnnhdtWk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.7ac6bff4.0_1591056910860_0.061156918533213256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.d45622aa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.b9776b1d0.0","@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/shape":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x8RvBLVHZEyvvsaLkS5X3p3JxvqfslnYlavhxuZM0JeqNf+yTFgl6RgIIhYmiuhNy5bcTQb0YhR1CDWzT8QpfA==","shasum":"ae593632dad6555a6b0ddb676c265feee1647187","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSTCRA9TVsSAnZWagAAweYQAIsom99kiiDq4nKTC1w4\n5L7dbBUTWqfUAYf+3DYBFRt1NUg3nH5KXT8WcrJL3ydMlXcbhmPCfe/mPS7n\n+daVzMeKKYYkfh+0exh2jlsVF7GvzFnaU5ICXOOsGLZl3PbonJxcHWKmY/Jw\nmaqk+YPvAvvCAMxa+/zQ4S3Rj7dd1PSz0PEvcyhynGWQJ1/vnzb9mw0T3eGi\nhjNUFVmBx/04LBZRyXFk5fahhDy9demjwxbfLA5IgN+zh9b1t8s8rcczWis5\n2DJy/9qLWy11SdL7tjAk3hpSWk8FDGkoFGtWgBPK3008jB2gggPV8vkzIxCs\nnhmSKX9APhmG5TpBzihOA1f4P8sctDDThAZ5itRABMlSUnZl+zdmNsOWFkgj\n4wgGPc+I0QF3S4mHvJx8+L9w1HGDbO9sPHJIB8daX8deE8K+fi/znaevFGo9\nKiCqRgeivcToEoJIRGLY7h6uL8F0A7Q2zjxuMpulKfqMwn6AkA/XBXDNdp1A\nEdo9dbs+ocvtIBah/Lr7FRyzXm9AX26N0KbXFC9pQ63EZZJ+BBA8r8qRc4xO\nkoBVNt/wxjrQ1VjGQ8oiD8VYOzkpWe7Sbc99aA92KKtBYCXtOiNSDv0Nm4tK\njPO84gQ0rNU6/WQRU5Adv8iNj4eDbEQ6fCd5Pqyq6MF/H8DYD1Ivhuj7oR+e\nsf5m\r\n=8UVd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpDc8kA0kbj6eBe/RAZix01kS/hek+zCsIwF274PZMtwIhAMkujEi98JjG6NyXAY8bX9DNXyNeBtiAkav31DVZV1Zg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.d45622aa.0_1591141523397_0.9404089281836063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.dc26c709.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a0dc2b5c4.0","@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/shape":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S5Yr/pL/QMX07p6vFkY+dAIUVAfP4ntDnQzUyr0mGI+bRWhZ2HD6u3UnNavLVZGOk5n2wXzg0pfwsP4WjHVgMQ==","shasum":"85fc43edf7bcd08f965ca8fda44f81bd9e2eb07e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkICRA9TVsSAnZWagAAiw0P/1tinQzRT0vU3S6h39Gu\ncACrBW/SxtzTL6R4cuFTY7KTnDIJBXkkQz1oOD++V7HeFmK+8A3drGN5X8Tr\nc42pejNcuNQbGlg9xWcOAMpqGi2GB99e7isoRChhCXqo4WQQddJEEReHzWCq\nYDOS/SSWLSYloBGcZXU5rzb2VCzPhYHMSCiKr+dBb0svNeetVguSo7GtnXZE\nrgTQGyzeb7LvP1Ff6YhbvVrpRtGPNFnkWb+pWQS2l1CKCD+yzwIKaKpRB4Rc\nBLIYVFH5rNuKiAZmwyKFKwEAQ3YRf8CKSsUofdeqNH1IoW5mTncZXHscEpq8\nE8kntNxtrtVfRIpTLaH6/SXs9SLv6h1dGfaYgAsNLwWsEsctzPNni0V8/q5y\nR4mXLsNNjxuV9wakLh83tZBESoLn05nyT+M+/1ETEEL9O9Rq9a86vjXAj934\nHrtc5YSpkNwPYtTT9VNdHElqMklx5GFO+iyne71PSgJeEVh5hO3UQb5P0nN5\nVQXZXAaqsdrZO9x1JdCfo/85/+sOkYfbPhBDCGPYRsc+lIERUjeyY5zlsNpW\nG3UhoUXeA5p2nDPsl8H8JyiHaApBS6DJsq/UF4JT+ia7StdKMz1UeX8DAaP0\nPJ2xfWkHGB7+3HBhmcGN6M7HmufEamZhI2LMez0gIlxFN3En5h9zfPT/2skJ\n8rzB\r\n=lvQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgOqK8a8RZC6Q4USiA5JCeYA6Xy/k5dF3OSkd1iLFbjgIhAN8WM/xgwUc7Y2b1XaFrDeZXTEvvWe+w5MM+qBNBbjF3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.dc26c709.0_1591388424479_0.18875501089105362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.b9baf6db.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a0dc2b5c4.0","@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/shape":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ptOLAWQ6p0IebsJLQAvoPMec15owNUZ0YrLuskphjKXVe0hYSY+9AbBLmxE4z4iZXICsxMwHW65vQ5ZmYRbLPQ==","shasum":"c6aa3b55853b499322662f69fc0e30684cdd1184","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qloCRA9TVsSAnZWagAAU0sQAI3L5bJ0ph7c9ZP+kHKm\nDLq9t6E+TwAsET8lMm8w8edQYIcyFGE1CmGRGaSjUjUjqTaUSGD8abxfZhKQ\nOj0H29KKjYtI0vQNwu0Ts6a6Go2Nc27velvlA2pg/3kPPTB/Og3dwDTR+jwx\nMFM0yM20cki2BBUKC9DNJP3UiDwwUPF0prRH+/wBUGI41eJCcAZOzG01/05t\nN4+mB4cbQUtQEnus2pomzlo+1X8ieUat6d+BWDiDLlXsaat/MaRNKqnBKJKQ\nfjZ58Rh+9YtmfS8OSM8lsVtw36s5FifOSe6S5oZ5XqXJGBV3IJ5rbldFquIs\nOVWNqiyI9cNReI2f4UkmyyeWMPh+Dm7IGGTrdruUUn3ypszLKm1FiGgzOf+H\nQQZPPU8ZwgE9LH1GBMrFbwmrAskMlH/rPxw57jFS9ZkZLAiFGHEP3FyqlMfa\n8kleD5iSimjksV1WJUkCcCyvc8VONnOlUhuZ4lVOiXQY5zyhGOBs7+TSS0tx\n4lWH3zLQ4dch75ezCvU84YGgQYT52fY3yRI/Hklnxe0UbB+kdZYnazOj0MAE\nagBK43HLxUIZeeBbrwMTnyZ5My5uxbopDmVqAu0Dx5sFZOMavK3I9K11tyKE\n72rOUmmEoMZHZS3iiM31nZKCjQymaijENn6oLFZOKNGAKDSKj2osx+/It9eV\nSoeF\r\n=ehgM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnCFzIJkqz9OcRo75jObHB8ojRQQR64g9dQy8mu6cW5AiBAB1aDBxqPxRCaiqh0lt/rPipT6ezP3/kefKcIlTra5g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.b9baf6db.0_1591388520557_0.3539607980483781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a0dc2b5c4.0","@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/shape":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VDqfu9n/TsXzfBJsfd1n2axUd2wQLtznumm8TWbDsUU0nkvSIXN0RkZ4D/53iHi6LM2xZ4cVwNnI3hExRyScRQ==","shasum":"228f6d9a4e50f56194a87716af9800ca8050e18a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s9sCRA9TVsSAnZWagAArdQQAJmMVDz6WnenfNvbLgOE\nl7LRmJWJw4Mw4pF2U3qJrlN5AFcUcRiuBp74eGLUHyC7uNrMIPIT9ddY8+C4\n2sS5eZ+b/VybDtvDfmheoKjNeMtymDmo+M+oN5qeBpEIWw9YcCtv/PmpvTM6\n5plCvgUoLU04drHSv73VAASbeoG9IMRsyPXXAiOGcOMGsbkjfXDLIhqGn/Gd\neFBsCZjiK+Lleuo4VrpMNtQkHyR8pDQDK6+gamSfB6S4lez4WL4elqnfHlop\n01ntTxxsFFfQDyOj10sgt8Cg870NJy1exoUtxFpQKBDmk+xaFh/cWf5Qq+mx\nEg7Jom9Z4zDEWzMAKAK5uUvpw4pMjeO5IJVpK+lrCcfsTmK1HMouYmQ3loX3\nLyC0KBZwZeyH8SYkFkWHIGqi3Ux4/esJJ3MP1abIPjcaPXl/HQl8Xy56V+YU\noyp3OJIYAWo3PyFjJ3bHP27n/deh8LYnHtrklNsqj7FngiPHNiw69XPDlxAC\nzwWbqZC3KlfpU/zXkhDY7l0+B0ABEeQqNKBVTOOBK0ZMHCg+BW41BFxwGAPs\nntYZ/dkXIdltoYL4drrrM5CsxtgdqlHeoQEJY+6Bc49BMl39qZopAl9jdFET\nUIOlK650bBBOhOPTpOVfRgOq1k1IPLzb/TfGvqTt+ekhyIy12BpWau8q5cdK\nWpdp\r\n=mpRP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC85umyoSb5brP5augBgdFNIB2D23rXsBCNS0G1cNmpyQIgXcpKlVUqIns38qfaREBKREm0V3ZNjtaHZ0biO4J2jj4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.e0b8c9d0.0_1591398251989_0.17937584579166255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.51552859.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.39e6f71e2.0","@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/shape":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0+xBzgS+gX6xhruRJVvi6RnShMokDGTKsVE5EBfiTDJYzXH45xLf3UTfQUAuMpQm4V+vb2QF7ip1CkaFwFRZNA==","shasum":"51e5eed1c11b4c423804a936887945ea0210c595","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRACRA9TVsSAnZWagAAogUQAJi2giF4rgGnqkymg0Lk\nE7UpgLwDeO/Mo1/+FC9cZXHiZVgTMX92NZcB9RyEt377B/00EF+053v+oOGI\niBAgf3/1dJOXFGY9HUDj/I8eMbfjbLvJJ8K/Ji9C5mHfdX7gXJ7tk/LSHDFA\nADvdfIszD9nwS9H1OMcPtwKbJG1JqabJr+HW6qQqcTXODqT4uCKcoavBS3qt\nE86hht10ERQ81MmeNF8eLw9tVFj9LmvfRaFS3cU4/qcDqzSr/O40BonPmRcV\nuAgNlhU66uHBjYJ49PfvAxJPwXRLI4D1i0O5YmXXYbsgkn+lB6CvscOlpqhq\nrdWXzq1twfZEUHRv/fp1S2Cz0dq21mADp5Ai5q2svuKsw/BUbTXr2hEKM8Ky\nob8Y7qJSgrGb01jQ/+RH3qfqbEk1X3Cr5kAlO8vdtdpxw8bPZRmouwtSCpDS\nLwWQYDBqfbYj7TXOhcKyJ8QuLUntjsjRpREzNxyuscHS+aoux37E1i9WNB36\n+JkzUHsN4EGWMy/5Bboev44aCkPtZHlOju+rMni9I0Vzv7eRArUWnyKjlraA\nMtMqPbLhWtAONoCTebZr70T1snS1lAp9POHtB4tIRCweBaT2dRHWM8DFYTsH\noylAFUAqyJGgy8ybm7mRcQkSnblkg7XT1ITuS5nTFzbTQ4zn+F0cLycGHIfk\nWYts\r\n=0Lc5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNtC671VjAwivlKPfJgxKmJoPNqLWoBAUj9xS0h7wgqgIgQ2PAQw09Fxhq+WL+8osfjrvX6kfaAqA7myuZw0OkxYo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.51552859.0_1591747648136_0.7151729272927527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.2e269285.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.39e6f71e2.0","@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/shape":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vYMSegpqioHS6UKz+LyYegtjF/hjyIWHBZupXttDZzDFnN5v8DMDrAhg52j6sUeNtLU5RB89JN8/FSyly/FCUg==","shasum":"8c45d7037db681c3bd48cedc0f88829683f3d7ff","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjRCRA9TVsSAnZWagAAL8gP/2UbusjI7jRayqUzPdIw\nzL4hIvi7+ltmof020Js6rKnR0Qkxo8KWLVZ6ZHYq4NohPmOzipWfa7DvMZM5\nMeXy2Dwz0NXuk2IGdEDH0ZospCG1m7v+oWntHnLbiyR09BOjhc5bTRTs8h/5\nxiVEhxiDezlxt8ven/GXpZ+27HP+AjwnPkeej10AZNHR4ZUsY7bMjrnElOkG\nXzfLQ9Ag0xYkFd9vbcKFIS/LppCTZZqvfmGmKhT2QnoK3kV62Dv72XmaUzKL\n56t5isZTFTMO/b/QtK3kPwmbQjEXfIN+yAaZKWUrOT8I6UXkP5RlmnC1991o\n1KQZSULnTmGzuVgRqWbA7Wsta83M5/ORJfD5kQjEv0+19MlYrTC/+DopZL7O\n/qzVvUoLqIPPm/yRQns2Qj/zimYxwLfkJz+MImHyL+geOjGCoCgo/zkDyIBj\n+fXROnm3ZpYwRkHAB9LOngPomiNvv5hHr2BIirlHDGe8qCMp64vnZNkoVjN8\n9C+zh5CPHs0ZDCGXztA57eelG01Q0abXYXiv88S3XixQR8i9ujRaSla2DG5V\nSHqSIJKmkDqeg7CdbWYKl0e0mo3iegLeq7Rjke32+CrMxyoc8ndSra4l48ZV\nFvwGXye9+cJotHgEwQBf/pFR+3EI6zCB5hC5s0pQA/MVNxd6VXBhrxy1Fppf\ns1a+\r\n=A74H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH2eiu0M/PjudFunI/++W2jQokcEByhbOe6kl+joytZUCIQDaJKwTPoh8yOZiVt9CJicKPKw2MfMflxfNLaJvZw7RCQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.2e269285.0_1591752912054_0.9602991566299517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.be138b01.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.39e6f71e2.0","@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/shape":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aQBFZFt8FdOO3Yp43MlC4nKVjKcbsAowYuUVQ9g3YrwITQbi7kaVnLQxSNnw8d5LHOXkA4HjvNqpIQY1FXI4/Q==","shasum":"5ef02fa8538a545974369585e9c387ff9e75a84a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UcpCRA9TVsSAnZWagAA+/QQAJWGenc4WRtP7YsXf8gq\nnGa72d2GsYrohG6w5q4TQhFm+ZtpI6MzDZR7f3SHfuSe4HupjtGH0hbn2K8p\nMacr6Os1YHnfv+UzVpVnV+huQEP3NEcs1782w9puwZa1IxxwSS6LTWRyayhk\nUFpLXvBfNyDfAQvLczMZsyCBAvNYkaxH6gpZNnKDFFOFQSE08w0t/WJpsVdc\n8Pbe6Z9StvBVXzHkJaRNywQyHht2zmpN1s2qd7GQTxTUH0aPd39/N2tYeRAz\n5Rvxt7fwhU0NDSGjHRmP6KR6Wa67ZK8sGq3OwWkv0LyJC+Fui2v3+Eu5ccmC\nPbD3gpGpuplftz4b5HWgJ4NlRD/6uE7KtOaG+D+uuiH2XgOe+FGRYz9RH8Tv\nQbNGt1JWhkyKnHi02mcgT5FdKJyCDpU2HjfjUu5j2LtKnJFazCXYlcNwAj6d\n2ta2PZVHCMczJ/OkiSkBybMdoIcI2fKkQhJXW33B/y86nM+AbNLz82rnDX9s\nbnYkEYI5FDXP7nfmVTOErCXeU9byXaQ+lyU/dz7cvOyUwMXIgneM73EdnXvV\nkKALG9BYiA7SDUNsrWcN7Gz5i4myzTWRvh+fr/L3k7jpQkPbIX8sDgF2peqn\ntep7pbTtrl0/k2gcSgmV7gepCszfGijRVOIHmYPXW6wj5YgNYur9cBGNDXe/\nS9Sc\r\n=bg31\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuQafn3rxC82PVGK1vhCnLsi11otM34AlwcQ0fUaNTUAiEAj0uNq9hTSfpFl/LuJGF1prFCA3sq9QruiCzGgDs7c84="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.be138b01.0_1591822120979_0.0644968362564089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.04bccf5a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a6ac8f629.0","@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/shape":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wqRFzWJN4FUsD1nmWODNalPXl1kEixhBWXsaySnIlTmP7++JTAzF0vLOjnpFzFb+EXFPFZk8tB733MdZBMGuPw==","shasum":"2d61ff34702f3a89ac28ed265198512810fb346a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bj5CRA9TVsSAnZWagAAcYMQAJ7TLnGrW+VaMNLPma9y\nmVc3xxMah1kvAoU4zo/2hYCkHdcRSTdVvM3zYSHuNuqxaMdyCbUKdOSABmtN\nfMERqXvxc22SzgAJI5HlBTHUE7cDouHjvZp+qqwINouWArbyadgMXrK8nOx/\nygU0cIEden4rtU4RDdO7q12bAi1k6ZIFNST/nTqImGcBsrKZq8Hm8aV1b4ru\nC9jZIhiE02mAP3NEOXjbh9uHpllBDWrv7DjqduE/W4BI40h49E+DkQ/IFM/2\ncoNnkQqm2WGGoGbdW8C6YQBdo6kgl0qtUrVOyvKf/8LDvPhGp1PlzbMvHsXo\nSMJ5BJZCHXYnIP6X2xKXfN+WYCfPNt8nnvdle1BOPEyE1mTYFelLdP4XWSOp\ndVBuyQPkG31/VnCT4HMmNir87T207/jsqnu137ncQ1MBg5BUETrM/iw+hNTT\na0KuMXD6hzlKK4hxB+3IFDuoC0xgkO4qhsFLP9KrDvhMsBsGde9tpMzzJJE9\nZ4EM0ml+rG7jxm/smHmmWj4zBvGmzb1mmBwPoguVC0n6ZRPTTrQ2ByDDnAem\nIdS2YYrrPii2e163Vaf3PaEIzVR1tmtsTzIni2H0GEXAKyCzu4W12f1OVbmm\neIPKKShlKB/uwrmibkoJCheSruEqY/QqebNDSXZsH75tfg4CO9Q4qPf08YST\npr3+\r\n=/kL4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlesiyMwoMmCcYTdUuhO3tg/rhmVc29jEyEwe60b4T9gIgI0PRj1u2tFym+KX6YwXDN53yg9kjkZ81us7Ru1cn5Og="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.04bccf5a.0_1592269049161_0.6938840621607709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.b44dea36.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a6ac8f629.0","@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/shape":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LZBaKOBA20e/72KQupefI4+dWV9EbCnQTilG0omCdGjUI1EfZTv7tCn+NtGX8bXg+tAYbZTtBBmhM/P5VgclAg==","shasum":"42a62b39578be3c9c954ef99ac72fb8932f56b07","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TIrCRA9TVsSAnZWagAAItwP/0gfJbuh9ZTDhvExtThs\ngBu8rxpctNgu45d+mPKWfdAUIr3QjXgQV/tugTWKZ8KwLoKPW/3yClweRFM2\nqQj9GzTmjMMpi9DjkvypDpELcMxm6IOMGvIMJBGp9yNWh3y6mZfILPGmR88I\nEdLaT+dL6pxTESoqZXOgqbHX2ReRN9fb78nzg26A/XdC6i4LViRw8C9HHN9u\nbm6vDVChOFJ/gNomkoJxH7dwvvuwZAHCiTYgjEOw8qz1pBr4gtW2oDvKWnqi\nuj05hV2WS0Yg5HEwMDSPzdsAryK5k0uXjjRkr/tDpGtO03b0VFbCUL8pGSrA\nhMT2Ry986pu2V1KZUGzcY/IGDiU0oaj8RrxwUdqn1IOPPJSRRQw/SGq4TBnd\nytBQS+YcG+ZdYt46/jPn1ibk9zNulVrAUg8/V1XZ8j9+75Vc1Rjo+X8OumRj\n93+MR4vu9v4F0Rkrszymmg6Lq4IQrdM45+D7udyvQvoSwpivJObIrS5ZuoB3\nFDjxef6wf47GAtGD7D0BN5a/SS70sGb8w1tBjHGbFYTJsGZE7xkiC+NrJ3AU\nJDg47K5Ujy7j0nrHjh0jEqRb0e0dP1gocG+1J/+AKrKpgo5AjktTf2eQqety\nw3+capIU8a65O0ntT4boei0eBlLOyL5zzbcLc2bS7VJn3nVSzLplNpjH+aP0\nzZd1\r\n=qvRO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsDnkopsqkPDZMYq04Z+DsmSVU2EJ4zOZlDQXgwgEKwAiAraDAyE9vtNPBzyr7fn7910Oc59s2PSLgyx7ZL8ciZ4Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.b44dea36.0_1592341035413_0.9550997370771415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.e2577e87.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.a6ac8f629.0","@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/shape":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RS5CuyTvvYZIeietb9VCRBuFAqC8G/7qUPMa+TNLI8XAJv6rZpySLtKnyl1AIPHjfs+mn2a1J+VhwfY3+apECg==","shasum":"d041696a3cc67b20572516d35ee80df4a5a7f6c0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TS/CRA9TVsSAnZWagAAksMP/26dasXgJOZ2iygKSaR8\nn74zvd6gW4m9elIWaT0ckDh6OsMnrC/pxXHDUAdTKU3D1S3NPGQqFtuR9BOZ\nR1IFk58portBdsFFMohIFnl16HCCmUGjQmjTCeU6ZPk9IbglbF8rEtzm8mDH\nbwtncCw8yomCapuf/Mi+YpmxRA6B9h8HXezwNAmhn6gCdepQAmkJ4vsCy7NH\nOz037E+mlR50Nm+3dP/eEYWOVyIbKv70m3LKxK+rAWV3fE86otfQYR4vEF9M\nFOcxNIiWnptqIQ2/WuFnOo7bzAZWZaJdrTKwyu/PoLrGV4NtQ2n0sUR2qmm/\n5pccAl/VjqSvIuwi8xb+BgviGEwY7H4GFK86u2bBvIpw9IDwhPZ27pOIOcjB\nL2uOMCG51Z4XuYws3kv2qs52KScTB8e86iSQ4X0Odvqi2++PNln9wA2c85ON\ncdVud8udenvKUZCSakcVLDAfEUXT1Ws748wz69hM+AE6rlK7n0Q35DCWQaKr\n9B54LFDbWHKuYUlZnywyAC64JQcBcbexCuc5gy7LO6TfgyKZqCqiJti3KTOF\nzgva68WdKC9jdbwCDuXGtFpqHRIHV5YoDYmBPkA20QI1nRjyApzU9Qm87K/7\nUOLQ8ewSQnBcVEG8RB//PKcyRsbSMAbEa07yJVFNiCwDTWARbpHNToFwWHh3\nYddz\r\n=W1Nu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMx5KGHmf91wIYWLqDXmqpG5/U/Cc7Tj5EZxY6VWN1OwIhAO7ukAgPMVGC37MSH/cIrnX2gFqMhclKhChVKM5QFIf6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.e2577e87.0_1592341695075_0.14892356413311636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.58b73343.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.3aa33998e.0","@material/dom":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.3aa33998e.0","@material/rtl":"=7.0.0-canary.3aa33998e.0","@material/shape":"=7.0.0-canary.3aa33998e.0","@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xCDZfJBXEuM8j3w9jRHvbh/21wT+8WO9ax1koYBEuhjoxmDJGb1wFDh6k9GvAbRrjfo/O9SE9gRi0/CgJoeWZw==","shasum":"4d3f9a6c25ca386e42a0aee805a2b0e48f360a7a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThECRA9TVsSAnZWagAAO3UQAIHc8JJW8ltV0e5Ce4Ze\nULBXA+y7VV04Z5yVbNJA6TLv95O2Z8nbQvIYVRTAb3J3vsuJhmd2pHgu7iwA\nPMI+Sv9T4epfyZnRtZX571BShNgzo+SUGBkFIRbkIfLDo9kpUAYKVeuAc8CW\nAEe8KjO+OntY3gGDsPusDpKcQoA6NViEa3uJ06mRlmjIl9zFGVTGcCKJmYVZ\njcYwdoOx2CjTPiW73HiPchpsH/bfnPHqAXRJpjNWBPbcCwtYmu9OvsfWnCmP\nKOhUXFUKq9gVn2ek1dZR8XPK2xdrofeTM/O9GOpV0ZUJLRTt+iVW22qyoDxc\nyp80TXSzkqVkpQvvdCRHs5EuGAP6l2/ge5W4mPGVIp9mWKO5f/Ac7DH8tHUE\nRgcfBac5Pzz8kwTuz7FwYlXqGe7kfO0Y0TN9eruBsTi9jHAXfZ0eLtiUkaYu\nYEVKFJVn70AM+//QYdHgePn9kW4Ail7vBEApDYL5f3xr9zT6Xr+Rc9UHqdqX\n/bOHmyWvpXEt49iBIxWKXqLAeWfHTLvkY1e712AAp2jExja1XXoSoa7CAGAL\nvDu9fjWdSdJa2/0kjTXqOJq9pYfYoAiaeIrESKJMmqhzAEKSNx4ihOeVEinX\nqBJfVilQKvzV3oG1mfmgEjDHrQgIry9DWzTr/cZEa+HNsugE/Dvw8paMA1Ow\n8uHe\r\n=KV3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWJn+GrmpWtDGEWhYYAYyQs0FUZy5vepat37zMt6+jNAiA43OQ5+YWqPbDwpD9+CgcRcd17uCl+qatRwYO7D/BKeQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.58b73343.0_1592342596347_0.6226616594594019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.f155c058.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eLimHTYkoa6Z9eGGgWS/bzShvH17Upcr2J7XRTPKhGcQAPHbCkgUMr1bpUyauF7dsHkrMCwH10Y3r6a4Puc/DQ==","shasum":"7320f5c1af7e5cf4980c4bfd7b89853a2d079670","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661dCRA9TVsSAnZWagAAKDwQAJQ8dzJxNkulyUOqscp1\n51UI+wOJ9hXMUG1SvMA8p9Fg/FWG5jKzdjwBfjaQhVZaYElO2vxGqJBfHsSn\n9pI15jkajFRVGHH2Ift9kML8HIy1saMmsSg+wnAbVVIvvBJ4wtLAOmnvcTct\nUQaeddkz4hxgeOlntOmHOO9bANseFkB/Rf8yiR/o/vzNt88ylQfdWSFaRmks\nZN3APbdRggWAccncKaGe/ocP4chPWeyRLQeNlcpR954hv5jDAznnil6D4iQE\n5Vzxf/A6snQTuRhICI81oMcl4GpVFw+nnYACl1CjwzWW5dRVIxGV4ig37Iz5\n3lERJ06HRk3rLy0UCs7RH8HuqPsFglPqvIvvlZgo9F7W9SN+AyJk7oao352G\nbgs5dmvVHM9P+HNmluMDBr1J/xsnllU/0Qby1A/srAEF30d8FTdw94StqsOx\n+rBstXR2b4oyHnoe6IbVMKd4qAMOhLiTmgHxwvRBKuJlFzfcna7GGaYcji0O\naEysMTED0FLbFC3/1JR44+hu2VF9SjKFstqlQVlpQDRc49j24fyjBoOKhsce\nV4vTF+vBnlyMt13nNprK+M4g/4Z0u3GtJhoA+SzHqdZhFHNvdl8kA6iXdQ8G\nr8sPE4UZkHTvBnryS3N6XYcjl6pBNv92LH+OPpq1GcJHT73Y4P59SatLpi+z\nVerV\r\n=yWcM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC20FsoZJRyJNurRjaG4hdnpXByKgAgPWMxqV9MjqoOqAiALgO5UKeO7Ur+kTbS0MVjCd5Dy1ijDx92NH+iDEnLwCw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.f155c058.0_1592503644841_0.8883357049402791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.309779d2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-AX7/GcBuNLHb1NINYkIRk1M6SXmR1CqIcbPw5sN2HMFCiS+MZ6EZM2v/6ZgPQqhd03iWe/g9KdLPvJg9s/r32Q==","shasum":"26714f3d4bae42241b8cdddc07681bc509133e88","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+OCRA9TVsSAnZWagAAuxMP/R0uutpX47s370Q6yIag\nW8MXnbF8Sjg52DVC0BYds/MRFUHWbKZxeG/Cbj5M/xEoKAGE1sjcNd42cyr9\ny6g+IUzFOoLUABZ8Kky/0lN4Gm5+gZlNtW7JtYRgEllTNMF7+C/D1ZMdUwVF\nA63I+z2+/IjlrfctBLTBREhZRVfnt/PAEiGJPU1NrElybejlIq3vVFrm2mNe\nql/bb70U1avKsne/SNxsjR983lDLYnNT87Vg+5azho6svQQ99bX1osioqdfE\nPZOEMNPg0QPkcDMcfnj4b3qcu1U9jGPn8eZbJ1v15A5lZ0Gmx8GYbgnY7+tD\nfn7UGlMqd9kgUb31M91W2WrVLMmStsAbcRxAGC0vEVUc76aLPpfBEzSaH7A0\nNA7BmN/J8PY2GkW+rn8O/9XIkc4PvWvFoWNiFjph9qSFDe+OBqVjBBzA8O5A\nJADL1v/Lx6BMzfG9icfPHMKbCCKF2mHS0d3ium33knu8GaAK1FW1vGOnnjk8\nH0OkQTALGuyZxS99drkhxPpvfmR6anf6mWg2VgZfaM38E/uDmKqnXukGaH9O\n/+9YpfPmGg2+x0pFjWTdn5IqcefpzSLl4xrKkqDbPwzzKdlL4bqFAv38ijJz\nFO3uhquocrIpPL/P5Ddc7jK5BSvXPbz6LndM/Veq+7wUlY1Jq50rHaoF0SYf\n3S/b\r\n=o1rb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACCYgZ0Z/9ft0sbm++5qE/QNKzeVlV8OtlNlduNRq3HAiBREVptMakmIXZ1mtnMLQaFqtEuvKIvmkqnkepVUz4Elg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.309779d2.0_1592524686293_0.17746110271343962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.e7649968.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ll8bJpWBCwyoT5LEdELRoGf7X2LBGsQrx6eshXxAMaAHaivnMsUvz6VKQgB0tPV1YBNrkdxAxgr/8VVXQwyH6A==","shasum":"0f7978b2d378cf952d07ceabb04c762aee9548ed","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDDCRA9TVsSAnZWagAAS3UQAJa4urmxkNU3Poc0r8wv\nPAY0CbGcCvmQLUGoZI3ZJqp6P58bx+Qh9R1ADk2lphi42vXW6wnGkUhExU1+\nmALyI0W0B7Ykcnr3hwBT3w4DDvh2G+RhxmylCrKhmjJUbH5J2IYBvj5WnGv/\nD6LnzFDKbCHqndl+jt9ZZ9s7up4tH+KII+PdXglHgSBJk9lwQnvxXK6q178L\nxtJlPUpG4O2BBYh49PZ+nZOxwlyjPLefbjVbcrEEbRyBvoREmHUWskeLjy/O\nnoIjR2R1ix69Xcy0QJKe+55kkSkl/5WNKrFrfYT79v9wDiNWTM2kPSaC7hvy\nVgwUtpmOC4VJChQzDWAizj4bYaKjxCgpAWstaqEW0NP+67QZmGdQrc4OlDw/\nPox3ybU6z28dHAlT9+M1iZ3jP17+wS9uK1PilsaVatB53DOCBoH5C0SsvaG/\nEV4Yl85pntNUHojgsq7H5RR10R15yA/obvBNbLXxI06eYHaYqttPRF+oRRLf\nEE4VzdWzWTv+I1Bz6H0gNcLosEflF7pqTl+YXLzvQytxpsV6app0Fphl5fzB\nBqAwccKrw/kRccT9NyX4Nm+PpkrbwRFTw9WIR0qQZZHhbX6A5MIliDAfeCG8\nEk29zFQDj3tRvmz+6+dSXPaQoPRus9Laq58pp3M5INz4746tsQwFkVd3FLn/\n/5cd\r\n=wZDf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfQr+ymTdj0pfuXjqmllTQ3WiRgK3AOi4ZpxPAg+7H3AIhAN3BCED+BRVKRqplfxQ0sbF2BLSWPKjjcjrAN2zWHwq+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.e7649968.0_1592602819405_0.07820678286965177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.8e21c78b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NwBJe1kU8LkLKjgM/hICq1RC9upZQiQ2clOLxU0gK5UlV7VFycxjI3W7B4AfWYzDA672mTSKgC002WVJQ6EI1w==","shasum":"31818060bbd085a667cfedc83f55191458ad9522","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InfCRA9TVsSAnZWagAAiBEP+wV+GKb6w/xrDeUtRqTQ\nMRS4/sHl7hPrcVgxbNMaEzhTk5IVaL24usxPUY8rgwtYM7/DEkYzU+dDa8dA\nVBg0LhrmZYtFo4K+5FjiODpTdj9+C1HK8yYKBaZ8XOFW5e+5m3jtflarmbtp\nzENjiKQ3h6hq84iB/IAr3uS3E/bblJ/rXntXK3anXtyBuwoiKFF2Ay/wSyv6\nhDNRKtKSAuOwcOKGR62YSIUceDq+zkGUHwIZ/tE5MOqk/xrhKAan8CwOEOiX\n+UQY/VXOxCl7QwjEa4lSOYIVhzP1UHKPj1XqwaCgaIQD4y4M/FrZS5gR1spv\nzQsRo4tTtF1QMvc4n0L3qpGwWw/wdaNEVkNTrpmcHqlVpxEmVA1cAdQmkDX+\n/4uK1cZpS+l9S9mhi3VNrGO5nH5Z4V5831DeoBXDtFNRMg/mmSZRw/TkjgUd\n9odVQTUF4hLpqzkqJtU832sUi3R5GdF9R2nakqa6fUzVvAgjZC1VcdsFnm7g\nc8jwzR5WG77lFGbO40NOA39HYQauE72rq+8jtAJJiDlezCJPtrXfFL3459Tt\nhJzaE54g/raIhMsvaHfs6h2kojhnvdwycRuF5J4otjTapKU+KMqseOGdlS2Q\n7oKlG7sBw7oIrQuIErOqYmszmqFZJmRzQsQ6SLhAfEqdUD+h9wIuRqsLaHz7\ntvAY\r\n=OV8S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANM0Ir9PwPBtEavlaGG/kjp03Zj8pGVB96flPsmBn+rAiBqLx/8lUBoVNZg3nlnQbyw4ekvSBWiyyTnoJQ3E0DGCw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.8e21c78b.0_1592822239217_0.6189327584512345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.6db76faf.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dcFtgm7CIhd4kgs5aMDakGstMa5P7tiA89hVUNUgMMISDlrf8hTU5uAr9FrrGUBjZTokRTXpI8kiiLDr/qMq+w==","shasum":"05a8c6413ea686cf669a4f3ba5b9d047033c0ecf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R6xCRA9TVsSAnZWagAAOfgP/A1IDPOoPTSPyOv2WNIY\nNItUidxbcFLehyumrx+Sdh8U/VXxL0gVV3i6p70hbJUIt7S2h8VVyMH6q8Gk\nq5oGoCffccMPfZ+vzPn0eH8FGjKohHIQHMUSmXZ3fRVscbMadmpJZok0N150\n5pfAXdPOSipWuPXVw/Ye5jt/7sPDeSjmC+PG686Jp7OZ7kdECoQLwNTFQ40P\nb6l/rIdmcTvOX45Eqb9AJtpQpvdpy9P1rnHB4IkrX303gdu5yHRQGS0KvtRB\nLOz/pEfU3MUgeTUlvfgbgtTUU/DWu1owoqt/twNWZnPW1tQf7CzqcEfio6Cx\n6LnAfGdtgzTUv9OVxYmSKh0YJRNRh4kr3oA7tORNhtgtHZizHNAgRgY/8+p9\nSExikCHHq/HwaWX8GEJMx0u1Szuw8EyAba21sCSnnzmRZ6uEqTQvJgzMig8F\noI1oRh6FqzU5L3HebzxoPK6Ivo4cA/qTtyPN5Kck+Wck1kaL71OjfEb9xqPi\nK4OcnGNjOPUkrgoFaqDORCYazyrww1vcYq1mlVGuBqtWu4le8b2naF3Mqftp\nzwpWRMLc+Y/aG4cvR03vDPHmA+n3ePl7Ts9TuPRcBFXJK85fyv/8vmL7/Uea\n7BbAMo4VHpjZhunpdM4KsiekzrpgEcidRDDoBx2HKGl4DL7xPMsBSEMGG01o\nPQam\r\n=IB+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw25y8V5/D5EcJeRgk1SEXsf5QW4ffcYOy1tZrWjK0aQIhANPrCpvKmsUneub2T2D0E0u/8P2q5Wyo6DAtEYnM5l7q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.6db76faf.0_1592860336721_0.6222269886341134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.c4dd9684.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=7.0.0-canary.f2a488e95.0","@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/shape":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FwPSsh4BnikIoA2rraaSrSMXRUJfCpAqhpYzv+1vmT/eRAUwjvj1x+8YrSt+AxYc4JI5ub0FVzz+Su38SkiKIQ==","shasum":"98d945a6f4ab390fc854553d8157606aee40affe","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxmCRA9TVsSAnZWagAAhM8P/02Sm/+rWRZg5S5i+u5O\ncTMckFoj2zPMPHnZgZfWCFBF8QHYcDoI58KZniHh3J8jlHBt/VweUe8FK+Fj\nd5ap0Bo3fkzdj7F3d4LkfLspidGbzq5/G13NOj5aaU9TV9jxNK7oYhQ6NAEo\nusWTIT5QrIUnyX7+HMESVD5mD8wV0ao3DLFML6qeQEWmA8G95xC/npaEH4LU\n1Dr4rwJ8J0rbOpx+ncjjpgOeI1uvMMfaoP30qV4fnQTd5byk+9O/HiBag380\n2au62o5y+nDak6ODM66mK3qJQe+SbVjMFE5a0p0JraaPXHRgkh5QmF4ZkUQC\nDV0Ul9o5aB8SDmzw1JADD0/w45fLHh6pxHvFacn9icrHHK0dL6PHPrhz7AQg\nkV3jjn71DKrRX734AdwvYFQ/TGKvjwCIBrKRqsGABBhifJ6CROqiG+7AeoWr\nigS/cWPOrLvKVBhXdlqlGZBr5O8E+FF/ukg20wAbHtSdCgyNH9dm2zAHYbap\nX+9UxmYqm8N/bjdo9Oz4HZsUKxZS5syppXZLOCryKPbZiDZprnI4tO8kYxZL\n2+nJjH/HazdeJ4Agp4hFl+gvx6N3mE5aSjgEGY9q++LU5uxmtMr/Qo/NGZEQ\nOd6b4UONztAMM/JGOPsn28KF1eQrYDNEa+SBPaERsgrz6eVizkuJeVnh7pP1\nLeOK\r\n=wdR5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfMc5AOsA69Ube+LPHEhZdjBr78j/GKkLq1nNYb2JC6gIhAKp126xlkaqrJQY5ir/JcjoqHnazs5c870GDl0jtxE3d"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.c4dd9684.0_1592925286070_0.5671527210920055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.b3e53981.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.15e81fe98.0","@material/dom":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.15e81fe98.0","@material/rtl":"=8.0.0-canary.15e81fe98.0","@material/shape":"=8.0.0-canary.15e81fe98.0","@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W/rhJbruQIaGrHBAjSGqoqL3WnRebsI+laDNlPj3awopDuZSXqZVMdsVGPIHVc1oKkoxR+BD0cOQnVnBKnHEIw==","shasum":"dcc38bb8f2762a62b613bbda038bee771e4b3712","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCKCRA9TVsSAnZWagAA2a0P/2tXrCEuxCsEJyP3Kcwj\nbYlj4NQSnraRjjruL9risWNeHNaPQqMy5C+dwzzIpHVc49YmOIGNfLJGGGuk\nEUbUM0oghZrKqatg7G6t0wmtxCohVx1VSU3x9ulblVcKTjXir7iCcTA68Pnh\nC50Hi0s6AVwHhuXG9f4F+UewlAUns9BdamslYjxryjr7m6qWTRnEmkjjZQc3\njPVqY+qCak0FjLPuPrN/0FwkCHNn5LK7n5IYCGCdB6GiRRICZycUvqoDLvsF\nzrWGGQcU8b8alQd8RHr28T59Rx1o01gq4webw7oM6NoYItr2vxX4adn/TR4v\nBPCYdYI4ttomZ3CPvdAk6hmOgufo2l4hhUjutcV2xqLbE1qluDait/J41CLs\nxvHLnWhAYahJ9J+E21qvgztDF+WKz4FmF3KNJwApErNfknXrjMy3+LX1sbrB\noY3vrFs7YQxoUww3uNtun0tzjQSvw6R4Y6poY0FR0BF16lIfMghrhrUB6L1A\nNf8OcfwIX5nqfSDxsCH0NnxW1af27p7Jp8d27L8HIXDfLExNlfhTdyU3JSwY\n26jdXT28Ii6+QXQDlbXWzCyMdweAwvfat4xplcFbUBRzDlC7lpBdAg55q5VW\nG17v4TTDF5slWw3BHgK5Upqh14zs//O6XNQrKjo/FW6ApRX6+qB0UBUzgVeu\nRDEZ\r\n=40K8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3wYK3/XvTTieygYKdg6/zOkUOBGw3MdAPhGSLMD5VvAiEAz4K1t8Njg//z9lD9KAcScARUFM7GrEK1+ZM62M96b5c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.b3e53981.0_1592959114475_0.5025320909473119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.b9468f77.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.599b8c319.0","@material/dom":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0","@material/shape":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-m6sGP2dn9z5C6Kb3HpJzJooKxmsiTznKQ3kMM5PqF/GmhfUAorrAJ7cEudxJfFJaf/eP5zsfZaZXoOpwiRVx/Q==","shasum":"1e1e5ddfd3d70641e8aa74febdb0290d632493ef","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88t0CRA9TVsSAnZWagAAg7EP/3EytckDavOS7Vp3YH8p\nSULGcaDqHZw64z9h3x5yJaprqvNRbS/5wQCkqAALTx77ooS9PEvOqqSr8Czb\nooFzJjc3f60STVLDjdJhNluRYPXAtLLDqJGeobLFWf6eCyYBkNNfU8CODCKM\nDUV7q9aflk5Fe8mOYKayE0bxp4aY3yquCOnAIygiYG+sXJVZnD+72NzF8VVC\nW8uDw21CUu1bQOyKd2LGuVZm6J98zN/5vU0Wq2GYCr1jrVKwvibwhJ9hA3EC\nh5HalN80XOf/shzYxnZtvo8p4FyzoxIxDDxhSGPlrVx5omszilXrNNKXq26e\ny/gHJTwG8JkYsIc9MK6ofiM9ELM7EtOMEI8Pvyn7HQHotJhSRgINfCxAdKU7\nHqdGbcwJGGP5Hmx3XSpoTv2MDg4ipEttLveZP1n0fOtasZ3YSNjo2F7R9SvZ\nAUjofg2bI9DvybrLhgDS2sgRukahHSvcs2SqE2NBLzTTFrgC1p+l3oQDpPoq\nhc2DvsavdTpHhf4NDhmc3hA+DrS3Ms0BBxTEYLSFoeU7ratgdramAtM3GIyT\nK8Z00+kZiLGY4YMFBOmZK1uZ907dutN3WbSN8e6QeUvY7nzk8gm6caHr8NHp\ns10i5LzxgL8I450slVxSK2FAXX07pOOCQVr6g6jH9reQaopdRw/DcvESH+Td\nFWvx\r\n=oBhY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDms5vBaxgJGgi8ThdZpbwiFgXOJE6KmgrqnD1NxYtSlwIgDoFyfTPXlK27s7HEshdno18KVDV6hF3t9VF5sMTiWwQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.b9468f77.0_1593035636187_0.04107673867130579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.eb790e49.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.599b8c319.0","@material/dom":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0","@material/shape":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hq0fpoBAPGYR7MJh7JtXpy8Dm3E8V3R3njR/EFqu6jvm1bA6wv/tyqTDg7JIqI1OB6JoZsn8KNubHs90EaG/pw==","shasum":"d4e9c82cb2ba15c18811fa1580c7d23befbc05ce","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RSjCRA9TVsSAnZWagAAHIMQAIRFjil7T0ZZjZpPd9KZ\nl/+aScYePVxCfQmdUk73Ax3Jt8O/lxsnwNAA137VH/htxY6zC2CbGsFjP3cl\nbkf1SYOGM7zFaV3zXlNupMvGopUZD9UsLmhtqemE06/yir35pgQJZ437uCQI\n8S4K43h0F340a7Zp8zaS2YrtdFlmBXl8fKwlAvi13z47zMzjcHK8N57VgdEU\nBV3UQ06jiHBCef/TSLdug2CzcH7Q8j22FCwolqmsk06JfNsGYuZza9dkAmdX\nLPzQtIRhy90TVUeIimuvHMf4VU1wRUyZRk3pFv15SbN2CwYrLjQ7KV8UR23s\n0EHFycVEWVmtV4265fp7HW7w6QkZG4iDAso3rD3P44GMVoVRgI4sh1j15ej8\nZMTUzM9Bf8LD72PPI1DCnZN3cpI/MK1KPiqZKNnRyL9T3VJwI68skYQ+N3rE\nAG0DaD/kdGFwRTay/KoUuzlY1kn4U6m7s95sNZQdM8CiSSHNvLxzMeJeZOU9\nOyKNaIoV9Qh2gNv9UshNpe4wOJSQUR4qimsBRmlDpfUfLe00v4CWg7FgReLq\nqe141UVhLNaG+iRGTv27t12RnQUiMEcJ3QU864Aa4j/6MaRjUlRBH1jYKK53\nR9UG+abu7pu+tz48LO0m3AFFeHoddKF+IqwG5iLQganUGBpN9YXzFnflMpMb\nEaFZ\r\n=wpmy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt3zMA/tUuyoV8nkZxmpr6J1BOQFiJFoaoBFdK8fPXQAIgIyvBg9EtURzxSZ9PWK2yTomuz8t6YSewTSMSA9pyxAg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.eb790e49.0_1593119907411_0.18459685611655785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38197b443.0","@material/dom":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0","@material/shape":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FDN8/waD6IlcRCq0XIdyKZSYhB0cK2QXXr7G6Hq129vhbloR+itiX3Gr3A7hUut+57JJsXnUsyxIfW2Bth961g==","shasum":"b92de9bf3046d5e97e63be18ab2e1f9b403017d6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iquCRA9TVsSAnZWagAAns8P/jgAf3fo4M0Ks0wfdrVQ\nZSWEah7DcMs2rs6E1pf7V8Ze8x2bebQPLHIN1JZut8gVNxhu5UALa50mTKXR\nVTgKM6TUZSyYca3qbyk6ew+ls6irRA+bO4QMdpkP/6SmRspZhvr1ZmJoRbCk\nz9GCYmkBmjD410koPKMJxD3NKpreBkBb9aJlIiESpN6JMVHTBTA2JvC2sBy4\nfOMPr82S+Tyk+IoZYKW6ENmIdCkBFrYZVCMA70AMNBaCIQPiJdvD1fv1ljlK\nWjangsn/8k7XjF08dqCTboywlTOIipDj0cHSDRep/zj203DoGQxegil+ScEV\n+8KNQj6jCsynvdk3Q9U3w71REN3LcK5gNA8bTQ7yf6jGfnd342TonuK2VqWq\nO/lzHcdIQw1DU48uals6Y36xmAL0aNvFRO3tZehS0X7OtxehEU/DDPNLal74\nwQxse/lQS5gl3znefsv5WoTkIjG/6qX4N4NrXQYGfNYK0j3MCIQwxzkOI4ZJ\ndaoYkrIyEO9CsZez26N67Llplv2/miPdAgqLFruNQnnJD24i8Gbvdp1qNzRE\n4oR5791bB2/fTml3mDIZpoTX/o12H4bGI8AaSsCwESYQGv5AbGljjotJ139d\n6I/VzRAQSEwO4KZ55rlcNZPJkr5rcfUnIm6e7hC7Zby/mAhxkMTgL0141S1t\n6MKf\r\n=/HIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNOk4nXRJ5cxHdR/gcHfLsw+6F32O4ub4Z31JyPln+3wIgY7mt8KE0hlah4ZaTfa9+8irCYyuvgNotUA2mhao1ZT8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.9aa1a5c5.0_1593191086117_0.9273975633289515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.d36e9861.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38197b443.0","@material/dom":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0","@material/shape":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JSk+xMSSEF8W2E2rMWPUMbMGkSIqqfe6B6jYyw+aZh5UJmKIaxIpTfir4cGuNY0U+jK6zCoBh8/X0TCiQmrnkQ==","shasum":"649ac05280a98334c5226880c888289aecf3bad5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jH8CRA9TVsSAnZWagAAfkcP/3jg0uij78EBNUPPpK9x\nSWd9oOUquGB2qh9aDl4NYahLSnAduZP3ExZMm142ZKefdcE+wQa4IvGUMJKA\n3reb8qPzn71wRGrOeLtftFZN0ZHpEfoXlmEIXtwFIzPIZ1LMytT51qC0z2bq\n3Ow4oxSzazmwYyZChuVhkiXB17Lz3wJtZ+wiocx+uhD8efCAEPx72+p84hRF\nEL6GQgngNBm+LjRTGnybztsIskonXEcbcJk6wkN3B5GZXCp5zVosXeeotv5b\nbmeYnihuY0Kth0CywPQMmDXsXBUG/bFek8Kn21XfpIbOCRd/AfSXb2rX2zOc\no0TerxVQb5Y0ODI8pymo1mdLWnynsxX5aBW4qKJxoMgEBciZwY8kWUBrQ7Zi\nPno77MZsmdm46xP040v5Wc1FuKSndU8b7CVwSS1fxUZ9F15+TEf6zooMeKWc\nrLUEcp7ntpa5F+zRS85rgRk580k2MaldN8r2KRE2tB2t2TdiemCTRCBdWvG6\nelIM+EP4cq86n+S4WkC8mao70SDsaOGh62v9NK4IA94RgUOwK82XAENIirmr\nIsatmO0uzOZHDpxKjA8AFYxlsAtRHyJNbe1ib4afaWaqmE3tUPeU/ESRJ2kn\nPUjloskOV+D1BbHw2YPXLAQXu9KXbbSpRCiN95453x6xE2pxAKzMP5MKWnYa\nrNQM\r\n=vn41\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYuvVesatZ5yhNebr06E0wvW9D2K1HHU9OTqdgv6LZCAIhAI3Ilr30jYewbo4K1qjyxjs6LkE5BScGc5H9q2ZCUlvy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.d36e9861.0_1593192955714_0.39371910796002796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.155c2f85.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.df7154fb3.0","@material/dom":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0","@material/shape":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CH/SqGZhFY6vEU/CjIWv6oalMRR4FF71G3HbIuvDJH4twB3XQqFJpOuzZMt+umOzUgBpSpRID9JVM3jNFf7iIA==","shasum":"ae3ece5350ae5078e9c7882af5bc992b8fe872e9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oSbCRA9TVsSAnZWagAAy9gP/1DBt6rrvKIqGmU6H/f5\n6JlXPt22to9TWe1a17TnF2LuQrxzu/pCauDNCi+7+se7nHUatH/swDJHocS2\nxhKxcRdpejE+UjUMRG5lYrADPvW5N7Sy218qIeUph2U3wCUPPqz9eW6cNlPP\n3Xob9/w0sq2Mkruc2et7mXrJzDWmlhF/YeO/3KfxWgj+Tvn8InrvjRMupYIm\nI67L+nxjayqhuvro+iJkHXKKvpWN6saDqjxd5A3SnzyNL6R18fMdFHsokSnf\n9/hoYjEYmS2zeKH4chUpIrmijL6+gI1VBHoujKms4GH0o7dV6QBUYnqdS6fe\n4SNhnToemnnsTFACvSd3rps/aabUnkW5Osk5/Nj2k/YS6xY2gawj/6IguYOu\n8iFwtZOI9PsDtIxnUVKa1vNd2zz32tMDtVHSIGUVT9sOktAu1gve1RaDOJ4b\nvgHsmehzv2MfRoc3sgJRXW/4SPnU2XQdJ1U7swlUZQgbl863hYiBFMnGVCXJ\nrqh7hJv4ejnhvIElXAn3FumfHWI4z/MM/e4Wm0aLbR0jX8l1Li6+4FC5wXga\nIj0Z1afH0+Bf6EiAy36yC9cvZWGiHgqdOUn6qWKcjSlIMKlmZe0kJyFVgMn3\nv3p+a/ONGbjppxMbJvL9W7QUUqcFWvydatQMR3+wLhRQLDIcYLPDgHPB4ec/\nMxbY\r\n=X5at\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPtxeEYqZHlomQ3sknCpvrD3Yf4S4st+036V2PvYfdfAIhAPsyUnDs6Zvc/aqfT/ciadFW7KUzr5uhqO3eAxN4DfCh"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.155c2f85.0_1593214106653_0.6884506315782215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.340c9c40.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.df7154fb3.0","@material/dom":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0","@material/shape":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2YGTWTVLgy9VM0zRvnGPFuTuUs3snLjNfZxwOJ2SeZfoDr2LoY0xQrlGGrgWBi/6ex3wER6od4FP1Bv6cHpXaQ==","shasum":"e15b04d068879d6b79e6eb94316ffc6954a33798","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obLCRA9TVsSAnZWagAAgYUQAI5vLUIlZK7AMpHggBJA\nHDxasO1PD3fgd+nuHulS40pu2wbgYO7o7yL+yNgWR5LQd65eojoFpCnE5f0J\nHIa82T4D/fDjiTFBhXHmEkYOruy1Vdpzw6W50HVNFgl0ritsmigwTovtn3Ap\n/8zKsqwZZFQsh1/0TJktiY2HqXu840PtgRzuWfZX3DzVfSJgg5NjDuok9fm7\nsWSaaSmCo8y9tQ2BkMnWkEnB+CaiAiw5ezr+42zP4JLvqtZqZzxGgxKf3rnY\nS7OWn1y93CZo7e/eaTExa+3KxCHHqYDevu3SDl5fvY+HJJauNUXcNn8ux8Cs\nRC9vusGtlT8Yv5lk3UFlWylfKudA7gvvoxRabb4qUUm3YZ5Z8oE5Spu7B7ti\nocGRKgPAIBc8Gte7UZDd50hTJ2hzak7P+OrjLi8FvKHSj0958RSEoQrArEIk\nK3sNPKmLn+QBoqyZ+Vvjw4Yj7F+CADl2YYEAcG6TjbqsJhIuj54MPbVYVcLQ\nW0ji8kIMXAdle0g14oqTjUXjwP/hPXyAO5pjYqXY2pFFRIL+L8gXaFFdeYmS\nllChB1yiEhl+/de5ARTIV4/5KzuYzKpOOJQW84RDv7A+ydoqUCjLi5PbTkiA\n5oMZD0ahHGXhA4XquADGDJQ0LCGlpnwVORLstts09WeTIsNeJTNN4NMqhNcC\n3OWw\r\n=ineJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDC8mKprzLwJKMcw0wQLHyUCtGL9avdxC1Ra89Lo81LaAiEAqbraZzUkr/iNLbmwUk/X5UuUmTld7+C/XM1MiBadtB4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.340c9c40.0_1593214667160_0.02513157643565256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-dialog","version":"0.16.0-canary.a3384d2d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c678a9d34.0","@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/shape":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Xeu4zj9ZsztR3DILbBnlv7dSNyjs24CenKC3ycByfYT4FuVwoM3j3WCSnaFwkOnFDFvA1VELXEzCEhz+xiLgug==","shasum":"8a7dbb4649a2e5b6e02766413b2ea5c916cbb081","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fLCRA9TVsSAnZWagAAfkQP/j3WB667oFHrvoLrw932\nBtKq5ZNlc4xIG6JVFIOFY+++Kc8a2DtQ/SbaMlKqUhxZ1+UescdN01KuKIKX\nSFxAgwL1RkLoW8V14hSECmevxQhDjLlc4fw6eJSdN54E6dLbyQztIG6YnCKO\nJmlmhRPvw/K0ly3i7fRCNhFUB+gWD309vywdefor6ephBGCzXoxKxCKBRsx5\nBzfy4y8+ir37dK0ITYJqx+Xpyli58YgHj+IvIDTr7Y0gFr4K53dCDs46xpKC\njgh0PA2Im3q6YnbQIsiPTnu/qxvJtuq4QnWWKVgU5WJsQHnC7PhFzRlZWEum\nQr0TJzvluuLyxyhk83v5IjqcJDDpPZY3K0/2I4AxJxkjMHbTzhtyUkOk58Dw\nNHtbsPlhxy4SU/WOMqS2twhPm0wpTE5PaO8DVzXw5uW28r4iyX9D7V8dKHfz\nqkq9aPp2Zgu/MfOtF4Se4eFaEtQBN8vzKp8xg8ddPbJaVZEXl7pA3bb6+QQD\na7D91pQgFHuckcB4Xv97q1nUHagcxuq9w0CJ+34mNCsfcx+E25sNxx8tEIe2\nKgYpmYO1bAoJwwWzizxxKDIcEaweysYpH+sGG85fK+cidhWK+yEoI+lI9ok8\nEuFN2RdAGJFsPo8ajtIbM5d/W6oXCQz9PgIRFcKrMisLAKI8aM2QyrCtSzSP\ndQDG\r\n=OISX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG5SWVPaUESgFDstJN0xftdHH0kEXZIkvjlY5MPc6z5gIgJRfH6kVRHcvZB5aaJvhDcfz6TEdQ4ekAo/lziPS8QvY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.0-canary.a3384d2d.0_1593550795338_0.8801233359759018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-dialog","version":"0.17.0-canary.6d056c96.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c678a9d34.0","@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/shape":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R5Qf9U9rxvAhtNaREjJGVngxl7pmvfmkgo57zf+NUQgDUrtZcgJ0BXj2CLk7xA6nfQNE148xHgMntMYVxqK1WA==","shasum":"9f036a35e906e0933a802a828a8ced2b9ec31c3c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oCCRA9TVsSAnZWagAA9r4P/jQ/81sk1b/bjgIe3PNt\nU04y5V/XPuVNerit1YIAmqvJHKw1XtKinkViT9wJfng27Yo9gSAAFxtnILpr\nFaeWK8i2NIiEjHFt4sjynlPvG+9pixICNowPdJeZJThvtt4UifbNKRcEXh3X\n8g6++24wd8T+4MbdVJ53fQvLEj5c1p1MdMIGONZNB+BEXR7k4tUN/5wqbLq2\nyCDKp+EPyWwKy/6nDqLwQ1uxvc128WIhlUXsINT64FSH4c4CITVLPIqMC047\ndZQS4+t86BOSf98aOUK5iREhm+/JnOQiO/tvKRpv+91V6x8RKVhb9Ku3+wtA\nvp3SlL3sHakNheKmvNA5EcGxK9ZDVe2ezdZQQFFAQPxeGh4JFWUhTNc9nxvQ\nOuXnZK+blz/REBDxwkzB0WmGH7RxwRfKi8CZIziQ7/qPf5eiomudg+f3t/rp\nNhcVZfpXs19QbOXxLiIaY24kgum9NCw6ldslcXUKmoLnwgUc2gmWAQrY/K8K\n/PMeZkZjZJbr3FVLjn+YUrXfqzlAiI9Gon5PLghX8HORa50zLv6RbkxsbB+m\nLXhpwFjMb2Q/1toTDtceTf1Pu/Ic+rcS5pdcJITAqXDF2lTyHXTbzOJtYcUW\nXIO0TydSPWSuOMhvcICjD/xRlQwCqzVUrnSuDpwEa2SScoNQhIFeJ9fXyePf\n0uBA\r\n=nF4Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQDj85bIHuMzWLWJ/Nkd8u6ILE0aMvaeNDNbkXiWXbKwIhAM8X7+E2tjt+NGDdQBswN9R5kI4b8raoI5SxCTUu2XA3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.17.0-canary.6d056c96.0_1593551361569_0.18893170526181846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-dialog","version":"0.16.1","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c678a9d34.0","@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/shape":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-nRF7AqD5oaxwIp+wy8nSAhpToKTaFjM9dmqINbufjsJXmmjw2LW5iqEhqQRynhiqKFTghllW2DKoPwJDpcnkfw==","shasum":"cede15c211a367e13f949bf5f49b37105cdf79b8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.16.1.tgz","fileCount":16,"unpackedSize":114695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6s+CRA9TVsSAnZWagAA+e4QAIR7YZ7kYPUlbM1N5PEk\nDbx25Wio3VAKD5BeNORBJsZbjKqwEfypBeiqgG2rHhQFqouLeZI1w9MLz2IS\n4gZhZwK0ntuhVO2kshRoxFV/G60L3mgAKmzZM0ZuyWcXWhCliPumuAann1cg\nXu9uT3NMmLO23C7jULTlCtKCFYEE5x5t0fggena3Vp+i/miSwJm3Y4jxfjE+\ng+9gqQ94mKY1D2ih/FeTrMFfIiE61EPXdUgGNKJZzEXBrO4gJvjuGGsMtVt5\nCovt1I2a8KtD0KDVy2JbFotLI5kY8zBKZPu2RolEN1FKMwKm96i9R2dyO37d\nv3OYs0Nsnb5g4mg6c8vWUYKUJCSq/cdlf1tZg236ZQojIoAWQmUoqrugaQHl\nL2sD/i7Kw9HWxCjp4LPy8Kpd8MJ1LhSEGSlb7JsyTsSEVP1udCSKYlpDlhZF\n0rxfyqN8c8DrWvGWHYkXnWxNkLQHzQn/BRiVKBRp0Nh4DWqzOOMdD+lk51SE\nTIaFvRNkckZusDHnxc7bI5NxRbOnKRpvtqdBM9KkgbRiIhhljQpI1Rha9rs8\nmtHjue0uiIxclYMcdlQW6tisxnuU0o963JOwnrOO8UDbH1P3mlRM9eTyMgAp\nqVtOF8z+9RGnT8UcyawvqNA2lA+Mze/ei563yQ9vTvJMWS7cjseIdW4UVO+o\nNGvQ\r\n=bHoZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4HAbV1IujcyokzRqN6vXxP5hLNpVd0lLwQzvoR3oKtQIgJZGr72Z9IBcEAM436XQcjLau9SJhn9vo78+DCwINjhY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.16.1_1593551678082_0.16708416780210622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-dialog","version":"0.17.0-canary.f7e37607.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c678a9d34.0","@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/shape":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l8FF+uSwfnhDXFSRPp4HeDSLCE5kM487YVpuZYgAy5dFzXglprzNaQYBWrOE+qovI86r+zjbAGfdsEnCrzrhhA==","shasum":"06e9177bc98d99bb97f750749a01b1613b1ac0de","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IPCRA9TVsSAnZWagAA+yQP/iPuORQsVj2+nFwhQPRM\nJ9icyDyGK/8TZQUkNQEeWLVQD3kAtbAGOdFZFzU738xS7sZpgq4XaTd0MZHF\nGilmgAYhV4Mu0BxNyDwSjr/tezPAYMXpWs6dzKx8CeeonvaKD34kLnsN173z\n808Jcl6zSdZoFOj088xoIRD8yuCBgFvmIbobQHdUBgf9C0g5l0KE4tkekTz7\nizaJIeMxYjF4QpggHwZijfsBVbcpdkF76ajrrkDKDH+wbyUf2FetcNeyp6Z0\nNBTfIveVRuL1J9XraZMF2oihpqO8Z1TQg+1BffWnuJnoNc1mxIuG8cH3H+lB\nUO8/F05chzA204tqUvj5qeoxj5sifWzwvvE8KAu/NN4TnEpv35ul6Etl9XfB\nGylmsm2nYDnZ5RA0hph7xV0WGEU0oPVJGTEzssG3HkiFaVKqNFYHMevKwPux\nQI4RCTnRIPQi+KbAtosZ24OekPxxuRr43hxKnVTtpx+tbu+FSST7PJ0z0q+C\nMytqTF/px+nJKTqUpVKAK2rAcx4RleqBGKCG9HRhVK9kyviCb9Fy2xBjh7qp\n23h/wyhWC0QinChOKe7lVGaYsqdSsWN9/aedEB7UZkryU4hJf4SnuH5sP/9H\nre8lPc5lQoy/FkwCvDBzYD9z0f4JEWhMwfu6Rub0SoMYgxlhrogFnEE5Ugb3\nhaiQ\r\n=5L4S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTRCnWmKUkFg27ZhM+xYv0uPe4SG7Eqipf6MMPiuHvLAiEAri0jKXqVYQ4rLHRGx79NIKIgu4dR/yaMIlk6oKS5dzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.17.0-canary.f7e37607.0_1593553423301_0.4051293347221425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.0afbfef2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.610c26c4a.0","@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0","@material/shape":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-V5kzR2uzqHaB3gsbDNCSWn3+7OhLc5/fhtSHnhQkKcPfzx6aDZedeHQAIB89yOxxNoXQ6Y+0/bDxpd8Lbui35w==","shasum":"a9a37c5571e8ae153e93c061099b4f2358f29635","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OddCRA9TVsSAnZWagAAJyIP/1GvgM8Tw7JWH4r9E/Aj\nOCvzDKf2YOqZfaSf1OGp45GzO7Gn3bf77/WYSuV4/bIhtnklCi13ePa6DmtC\nPQvthQqXppIPUt2ekN9IDLq2JzW2tK/aDwkwRB3x6Ii2D3P7zTsFzFm47gjR\n0iTUJduBrk5rUa+78Sz6CKuUUmw2GGI1gvf3IKRGBT/vxDtj1Vt7ifq9X4Vi\nGPdklEUUcOVz9ZoI9CruDuC1LNXsY6blFfB3aBaHLMdHBPI2lF/1fQB5qFre\nk4wFbXZ+AKCAzXL9vvDjYsWaBWHeZkRfcrzRdoiCywo4HX9YaB1TR2KeK3wJ\n2NGe65id7A5rGA+5Lwn9YIidxgGU2ISnWY1++lnunzjMbjMpnJ8EKcDA0/Ww\naAxmEESVCzVwDFwkragLxUMgX65uAQ+Dpf3h0UsY5T3xBRNPyGH7IvITI2If\nu/VbdZlklbnjtXftkTH1nneXXr1nWRXVX/jT3PLTDfyQoLrZkoxdDxXNgjGo\ngiffQFVCnVdMs2w+eDcaxAgwb739GH0NhCERix7W+dG+QuFoSdDHhbDNWAeY\nvIRXmFK3qyTahcvSTgEx8tEPTRKjBQITsxdkXS/ePcJUmnN2G6/l2eLZi3bR\nfna7/+QEj5LXaKzXzo5H/Fj3+1HuzIhWNE+yFStOGAu/QaBz/08P4x2R/t4c\npQMu\r\n=M3ZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqlHZPlDD13r05ApVWCs+DwXbEq+vxpdnAfLohLwvaWAiEA9B+TyYWDaGvS9bnvjMeCeq+AfMqswyG55sANdSndstk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.0afbfef2.0_1593632604878_0.27976941999797433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-dialog","version":"0.17.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.610c26c4a.0","@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0","@material/shape":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-MkqySGgAmp83pE34Gedrwcm3NpyKE9eNx1icC99posrG04AXEhKT7TDNw5oX/bAX8pt6Qd4FxzvjCtVkDYb1bQ==","shasum":"ccbc22c052a41b83050b51bb8dc637c51e9cf501","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.17.0.tgz","fileCount":16,"unpackedSize":114695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Od/CRA9TVsSAnZWagAADGUQAItlRL3JX37u/ktW/Piz\nktZbuxLk5IvPd2MjZJJjQ1ss7SHk5JZS/JDVhuvF0WNpFo7Z7BAOItndx040\nWUiV7kwcXDRywYogHeSMTw6bg1l2erpJaLD6jQd/4ZM3awSOTymRX9eHm/Ro\n8m/+VcQ0NR1H0x8C8kLHnJfRp5fhyByXnQ7oo09yWaX2Jm5O9PyMGw9bpTzl\n0dZBFcWJJHgU0VGfISZoa4IfjyE7OC/hgarYln+y6ORDw0LZ7hb65H7p4Row\nJJzXi7VCUUg6MgwoiZXQwsRxxPOqANYg6vUNnFYW6ZOL6iw0ItGo4YR5uJX4\n0H1oNNvcv3fYr83yMp6O+qJc4kZBXiVszGlU6AL4b7xmnoPp0hRGYf6Uy8uK\nFZSiafzNbWyXa14klf6Rutq9Ls7V+y/ZY1cpDB8XvcWOKOtjE7VPOKZ+fMFq\nKqMckmU2C0edhAzdoqIVY/FXXxq/xDGr5kfg6Bo50YEXtzT1VQgQ5nrzCCyD\nCLawkWcVgKJWWZqAS7bkw31TwhWob43+Ekzco6SAhvxD6Bov5Q0IpR/Z2mNt\n+JslTnhG/YvNojV1CmW6rfhfVyNA7P+I8pdraYKT7MLpyNIurmdEMST+B7r/\n9tL5N1izypRPZRJ68N0I4DaX3+wL0XunqorNXBe2GnMybBFTr7Pa3SGBdG1J\nh9nW\r\n=zUiK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+eTf8ojcxhYixkoanxCl6VgQ24V9y4NhuYGT9+Mr5CAiEAm41al+acLjZObLxBlCbSV3u+M40/6Anaq/Iecsprl3w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.17.0_1593632639218_0.6520234432160736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.fd970958.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a78ceb112.0","@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/shape":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HZC0hqjfZUVw2K2iY8Em/DIIsxC7GDtCdKr61GkYwahK4wRBnVNjphTmEA42mTima/H5UHq0BIZNtlHfbgoOfg==","shasum":"d1ffa6be247dc20780640cbe3e21034070778fba","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R0lCRA9TVsSAnZWagAAWTkQAKIbBYuBXHgwXUdEcOR+\n/x+CIgkGMvApn7lUjJZEdGZL+W43apwoToNsGtuRmRZsgf6Xwdj91LOtGI0N\n9KLz9wfVEKGIHIaxSx+SAgwPNNB16aa5kKW+sajvR6ZCs15upzU9sN+7ZiJK\nle+FZJasJdXLuve1WzCeeKnIAtbeIFoKa0ZuK/Zx8VqmYKmx+W0C8uKUHWSO\nUcHJmwxOEyvtdWLPfmcvPvFequOmW7dbdj+xLnc0J2P8/jUf4NeS/scRRMy3\nf48NDBgnEHJ4fIiJ0h+0uLVrrWXS2/oY9tVKgKeKWBTSjeqoLEu1On0Vqxfc\n5HHkKgq0isyMQrv7dpI0yMR8BcNegtjvfsnPJPGAZF9YPtLy0lcXD1C/v+4x\nw/xZt2PVcb+k5FqddFWsM4hhC0K4UJTXDMvgbufqsYuAorhKUA88iSWmVqlL\nhL2d3zHQp0yMdtoZzqdGb7WU+MNmwYX04WYGAYhz4ZEEnn4+7+6jvPvrrJM5\ncIeTJwPYpLom/yALxf813WQCtgCJVlCzHtW6QrbLRIiu2B1sosQ9N+CrvMd4\na7K6efTqVRDOFtM/lO/M5/bydiPVUS7nyXcbzhmkjpYfqmhpBY5uzzcydwuf\nxsJ4Q6sp33bg1F9pMlNzs9H8HzxV7PS9fT5nLwzNxxVpW16B3KqSH9tYoLsy\nSDNg\r\n=WSXQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAP07cNObSfONS3qHoqfeskIytBcMd82NB0KFLmyuidbAiBNG3+ZXlSX0RkJ1XoE7NtxFsOFnn1YfDp+e1p8+GLuiw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.fd970958.0_1593646373585_0.2965924063634202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.fd44be19.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a78ceb112.0","@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/shape":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CzVw/BUrfF4NayTGgINwqf1oRrjuQEoCQMz2UexXmX7Bs702FGHBoqXSShiB04IvEL/24gkaWTIMwr+I3ZrbmQ==","shasum":"e9f7ceafb4aff6ad0bebe5ecc8de6baca643afe6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUTCRA9TVsSAnZWagAAU3kQAJQeFBCjozW26WlBKeWo\nhcsJX8AWSGpd/va+WkThwbmlP2avJ0awdkNf8FW/iYkyGeyuiCc4i/CRpRQQ\nY7dnYpHjIfOt2YU+/4L9sOEggZiXr3ybjj4mxTJOyXxvPT3/oC84ERYlWtkE\nFqsHXguVuOCZXKfeRQc2eRsiNk/rVIYtbA72OkWpA/EA0HqgrvOzGV0VhS+n\nQWErAQsu7w+zzNkpulkHVBfbK0hqK5T9+tDh+ZVVXCv5kZ3BkGiu7mgrQSwO\nSRWhiVVT79cMI1lgKC0FN7y4DffGpeJcRpBh3ETEXNUj2mw7mVQKBJz8RTJR\nJnCdn1ppBJFuLoMRiT24dD7PzxCGQZBjfUkMBHbZdIEtikKpkf2WJ5r5F/pE\nE/PrF1yyoygYVCF+RWhRaEHGvZ7mlmCjMRTd1kz73rpG6B+Q33mZRD8tzA28\nxaawupfafEERu1BY+QoFjXfMYHxxh8pyLVqqiSsf/KHL4PsGjvuUxCpqUWn1\nh50agrzPctZdSETKNrR6eVfpslZoRyqXUCY2vYCaT3aqU4/NtkB0dOD0aC9J\nRdNbsOOv0YxlANK1WPhI4L1/jfLQ1BA2NXYU5WcF/QSL04eiLVVWO9yIQTU9\nZxOsx0oPssQNhwAVOy+DdnPbkZbG2Zs3esjTZ8RyUs2aTo5GeBrZOLJvClXv\njCRs\r\n=s6FZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJmYZ7wIN6w+ZWxtsLapyxu80LhXKl8ZaSMI3PvFM9jAiEAnOtcJpM9ZPyLwrOqjwl5pb3YP7wZb2V8vyxVc7+ix3s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.fd44be19.0_1593668883124_0.08988816804253963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-dialog","version":"0.17.2","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a78ceb112.0","@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/shape":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-U9iLbDfpzkDAKtQKOSWACDqBCiYu6POymdIPmA4N9yRJGX1v2sNDulaGhDu/IqINz26TKT6FUMWmto18E70xrA==","shasum":"3ae79c74d94e3a773a11e3d744be78c713a3bc0a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.17.2.tgz","fileCount":16,"unpackedSize":114695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAA17YQAIbGlqynBQSOHykQe8Sn\nDkVmbJ/Nx/zBxbcMb67oo9jkbs4uQBGNa71ocqRRL8GH9If4tDYBAHlb9/F1\nVgdMnXMq6gX2c9OUrXDkd/AQ2dFPESaEt6cYFNmPz9p+E6CrUv8HtOEK41I6\nkp682b4JUXmwYI3SDH3qzZTwBBwZgcWIEDkc8nDHpjWZpQq8nQMKWKEIxHZ2\nY55JUFt0lnx/Ks2Rp7ds9XtbkYDmCpIq6FUC5Hmxc2VDLIzyYzLjEdPf31vD\n3ZTQVWv0ZFC+Jxb76vylcZgGZM+KRiWWAGr0SX/MkMxFhXf9LCmC7VyeA4ot\nPhIQhQr7g8jV18ruaY6UEUtOwkVcinjtaIOPlTFDo1x1CmYivzboyryFYn0V\nOefLiVRtXRKjPE2xXQREYsphTG8NjL076fTrsquCL8uzwIwU+CNfuCln+c9V\ntlv6jMYDT13dI00KddOheNywB9Hn5LNVHVvi0r83S5g+nd1tfHXNsXJyVC8e\nGPnh+nU4andDIul62S6PagKQVWoAthWMJ6ps8rf8kCtIj4SeGL9364+wXfTD\nP0CMVYkGaBISEsWVMv2HY2uZn7PK6UzYIthTxJS2iiE9cEtFZj4TY3shgIn/\nMDYiIx09dvkiQx0GIwXqw3LSOTA+Lc65cf8fdZDA/ruDTP22ITtMw6iL0w26\nC0pF\r\n=ZQhn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvNWtDJ8WbAr7MHvg/QGpB2nz9BKDFe09Ec/aS1Ab/+AiEA5SDhwY3zl7rXriuAURSeQVdefq1b4AyoB04tzz/XQWg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.17.2_1593669490204_0.186948957366867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a78ceb112.0","@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/shape":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ORrlDlKQion7/Q3lJpcdVx0sS3Kwywa4V+B0yayVVCTW9VKSzUUzEkFQfICkoPapW5JB06fPmAPuMXfdM9Rcng==","shasum":"719002ddc5e1072d834d6b10a504b98e1750296e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeeCRA9TVsSAnZWagAAmeYQAJGsG6yp0ixaT1iIKp3s\nRtztsr1BirhsiWd+EuO6bEX2KVIZY93HFQSzPIpNcVQr0A3u0LQ6k5dMcfJf\nR8G5D5zzMUrNsbbHOc3Uv4B11RtrejenvERbXexSSt+zv1XAs3F3epa1C5jk\nYrH4E/YNsGQO7nCI7kU884O3+Xk3ISG4xGHrtPK1TWE36P/JUxGQNtkpaisj\nVPmz4Ocn8b2ip+ZGYQguoAXTLhz3mA/0VS84NgYLrKHwRB27MSgp9sITW/ib\nyYVQNfJmuWVX5ySA+dxBDVyzcvxyO1/bTpR4dev2SsPSMpJbLAZHfzIBC1mm\n87D43djHdG6xpkWanSxwQJA5SKnem3b5u3eeI6GswkC1KjHVxosboXAlqElr\n4ePQQZBvvVpexyTgXljXaxmeRbTYdL0bpnBhCAU0GfmEHpmyj2sGV824SRdc\nchBMfR9u9y+ZyBFFmHKQYdm60oq5BAZdRFu3MlQ8dHrqYhV9pj722N2UqOD/\ncMaxD7GY+O2at2XOCh28G2T3nT7NPMw/V1K05qoFLcYBvROSqBF1JCIvwUbG\npF9O2USY5i6dg+le4Dd60kWt8x3Yn6TdH+WK90yDkI/S2s4azhFqgbsxnjkD\nH1Nz2RROLLSvSLk91H/Q6h05ACn1zeMLXREgeH42lELtTQ9P/oNs/6T2UdV/\nQoXF\r\n=nNoh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL52QDy89GulP6mdF40vjOwRthK50yk85fhF+BJxN3MQIgVwgVE/ii4+5l1jn1lw0XVkGyN/7DWWhoXCvDjMSbRjU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.ca6fc6de.0_1593669533898_0.7981422413085546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a78ceb112.0","@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/shape":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-apZa4XdeGD/bhbK9EpazwBAsPVZRgJ4Fky1PyG+57FfJEMtkCb4eIArjY+VTKJ5ARO2TNzEJHQ39UMXFiIZ/yA==","shasum":"a133502ed039328eeddbea339ffcb79250ce1032","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGUCRA9TVsSAnZWagAAPp0P/RF2NAVJeU6il2Hg8/A/\nmdncTX9JHsvtIeOdOxQgPGskuSbSh1aoQxFXyBbPEUDupBudF/ky9Zvyosgq\nRekkDwjpft2q/KdYF1OxR5OuGce5ayTTtW303cHVCiRyIQRL0zmd0TwsV8MW\ng+wfkxguBcyz0Odx5bhoSI4/0sk1ibNtjlZDr4JHTij4DhPfLWz+l3jaweVD\nJ1JNTBPSA+7nq4/pZBewnvbemB4gvpaQ87jqzaGw4zu5uJR7hb0okD+U3wcc\nlQtBE11OYlePpKfc6riFjT7Seiruuwyf4gDbNgDUOoIALsKQnEP320HaT3ZB\n3F+/IuuyvGxn8gTr4gmhI8pVfQf7jRTYmB0cLDcHZYrBRCCVgeSe60haK4Nd\nhCs3P+zYLX9UZohKdibU8+HmcMEIyyVRGaG0l00cQ+g9pYnMCZ6eYLRkYTlg\nZGw5AB/O9hvH3vPUvGevCmyFjTTOHU8uEzeWO6OLPJFwEMIZhUmaIq62jVke\n1MWnHMx0zLRGVWXNUbqD+rSVI4qfUev6KNaB1vPsnVBkRZtpmENcSt4Gs6mv\nsEmjNtwnmHOLchfPMmAvbCV0QbuKLQPGmzmfXSc0rvrQP8qRXH1bt+JgQsuW\nTTjJmJc6kf3Vp9lsgXy0GOgiJeLL2u2kRWqUp4c3yWlCfB1t9ZsJN6LDXjZQ\nwXdI\r\n=/Bfi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBU2GZtB8pZm75jEF8eriej02WtsVlhZUq4RZY/9bIvgIgJ9v4+sDI/0XU+/X3cUiiD1EnZwRcUWq8Bg4un5i+WyQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.79f1ec2a.0_1594143123946_0.425534403017223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8SoM+YBJjH5m6A3xPc7kFWmFsaRN6KjajKphjJKaxREB+w3of9eeU+obLEo/lVBERy+5Bsuoz+M2diCnfeKO2g==","shasum":"51e7055da7112834efd9ef22e54a4bdf96f2d5f0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JjCRA9TVsSAnZWagAAsW8QAKCreVLe1wNhMl5GLkLn\nJMgI4prVcprIE5S9pVmfF7TPNEekuYJOjj9RG0JtDbziDOhVx4FUyYofBy8g\n8qzCJlrVWdOk8FxDLOey/cemCtnfshQcqjcEaLnPcxerXx+xyoXB4TkDScb0\nGhnVVskWqi+QJWJuQqL7oHHMJ9x2xc7o1FmV/UWql8kkD268WTJs80vLQ1H3\nkDan+bovgjDD8aS+ciptmMUGqlrzDzmgAID61Pd8JprfApRER8A2fbC+BJ5u\nDzupdfdpaflnrSIDyco88KIke6FtRbT01SBbndhUO+EYALfWDmlZaC5eONLY\n6PYQY5Z3uuFEuxFd49itPho3YZAWC5rRlbfpMzj5qzAZPTAuta6s7eOegn8/\nFQvcGz799eU21hDnPzDeaUUQnQzXZ1C9xpraMUxdPd4O8lHh+ZMDnSZLJZJJ\nTS8HGCxplQRdMEfZgORcsx7WdUsvIHPiH13aXg4Rlha5uwyXvB4IkUJBR5tg\n+pJtH87PlMm8NbckZQAIMoQMY1c++9WMjrVREVDWxj1Mx+NOyUQbclw1gWEN\nABwkltP6iunboM4vyd3+68s1uKHhBLoxG7XXP1tBkBh1ELbJcFBGq4f/DcJD\nHD5xihmx6oYx8mdTI4lkPWGkr6lzfCgRVes2AGCt/Ph7cX+77EFN/q47K7P/\nVsrF\r\n=GCsq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfY6YDkHJrRDouFlLpjSrHJiiJ3quVStoxk+c1vgMwHAiEAtHdIIyS+h7jxp/1CLwz0V4ULvkl+mvHtGMtBWwZfwBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.a7bc45ae.0_1594315363182_0.003845134987466192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.b184bc1c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-No0UoL+bp/JcSQbz152WQKU+WpHg2izHxPg303JRkRINOX4XWh47Ii5JuJdDiW5884LnnlbTwBFFAJfmh/vsZw==","shasum":"861a5accaef549db55d81cf6d9ae3d143555d8fc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SLCRA9TVsSAnZWagAAL1sP/12fQw10ROviPBLtJjdb\nKrelhqA2L7RfP9NwNO8fLN+xUtnL3yOJezjpS+ZuTB/ClQpsNO3MF3kaFSI5\nv9bJ81R2McinURpR1tBAxC94p5+fsLnJ3Z+jA5Q39gnlinKdFtk/XQMVZHCL\n44a3sQMcqsOjxlkvtLWgJ4R6Fm2gGp1dvlk4QuAausxKSyOrK51YbUwuHF4B\non4w42K69pArBzHi5IVQ03y3lA+qE14H45ZphIIub/w0u/tqMKkt/2Hfw/h2\nJJBUYsciYRl2jBXWHPQw19A5cMxibbrLx3l/67PUjlAH29UQw7/1bz2Vd7Ig\nUwFJ8O/o7gYQNsSYwxmNmwovrdaBK4Wb0am0LHYUXBDq/AhcRC4paPHJsb4r\nycehADE8FNfGDLB0II2a6Oi72Qk/R9glr240PJ2uGs/V3+AnXIPq/odHVtt/\nt0Hz3teReYGRTh+T0OgJlcTjvZNv+YZNaJSRNMHhiej75UtumBvSfPA2OKGu\nsFpXGTSbgWiBCJeV0qAj1kWYZCOhme5hUsrTFgtfoKF9oURFPsgaRIXYGm92\nAX9Glb9zzSOLRF7JgI1b6F8ux0GBO9hQ0YZ6uA6LZAWO8Ta2tjRYEJj/3qa+\nlJ0+kAU+s1Vhw2/jojo+ymstIsU+l07Fsi2SQdeGDN1KqQjo8YVCl3mhf8xA\not9x\r\n=Oe/3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDypDqxpmyjTBIJ6sEHiTUDMiHuQyD1jDFAJDkOkZ3hAAiEA6ZG9fg9NdfDhLCI22F+0xrZ3LLYCyAqNmIOtVJ+bomE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.b184bc1c.0_1594315915179_0.5051731498534944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.b39fde62.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-09kKmEw1HqxmtREzvc1CC2lbq2mgBFID6yNy4ASuGq0mJ2HKrHFJdLQGKyakzAikgEi2C82ozErQDpgIJc+tpw==","shasum":"33824a747538bc9fc33848d0465feda63b8941d9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XECRA9TVsSAnZWagAATxcQAIEHLTG7t0MdzBWDstHc\nlvqxqcaUCS5BwnI+XlhdFzPjjH99fCjgHsngF5IYittQYXC9ViFEHaMKUEiq\nvtiyiAqlgynYicNRQvv6jQ4Kr0SaBE19x45uafGRMTPBewCsn1FsnAbcq0ry\nRIcpLMPj/mmPrnCDDy+0bUaxmnY68nAbFV4FQSXILp909I/YAsp7xqGDVDQz\nRaeGg0efwyqvPJCTvG0LL/qJXwnHzmOk6R4qbh/g19l+6/kkv3jaERSE58tY\nAQtquUHqjMVtfP0KSeL6GPfQWGq0SLsQkN1Il9344eRDMastQxBrycV5A+Kx\nrv6Oi5OsAO4fpocUbcNeGMGzUuKPvYSVo7uP8MTJOVb+MUNPsymnJEvwgXaZ\nuYsHyQTgQYHWTtGnCMSjTKFwLKZzfPHsYYW18A/2zwhiLK3MqgtSSX7j9vD1\nkAJcMTT/58vYD5Zl+t7KuriYG6Kbx7qxYylLFOkYVd0ZZQuLyoPJqOVyyZYs\nvHmCWR5Gg6VqnJkqbPEDguQHdNwHOaw9+Psi1NEXO7URdFaCy/tiJ3xgwSwc\n+j9st0ioAhVghWlzOCPyloysPTBFc8rV/08ocRvxQciKTpOu1irRGW5nbn2I\nwX0fq9NWpTOY+TNyGGyDTIDnKJElKY6gRvroP8iu1FEm336ssasFo+M30q1T\nGSFx\r\n=aX7d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDutlq0Y3nasZ0q/35DyPWFTrhFdo48AYqffBbQ35gVQAIgDAIh8oiM5WdxkwVpBtSUDlK67MEJk1K9oMgZThTarnM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.b39fde62.0_1594316228364_0.6304393239019206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gHpJNlQKe3gJrHcU6sUPjkkJhsJ8LOJu/bGm1zszuTQll9tDVl747sR3jmBYoj4zPKrXLLmRTQ3jcN1lXC5bpQ==","shasum":"f019d451b9c0fa9eda0dd49fa30ee94014338141","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2ERCRA9TVsSAnZWagAALYQQAINQRkTshOYxUB/TEgWi\nKSrGimaOCAvuNzTTL2U4loJtFSGE5aL97gWQ46y3tEuUla4rVUgFnkdfWWLX\nipGSbfjoBf/qRb/c+ldkFC8zHfc6CBWApKeFLya12WPI1OMhVW1Ga3ELaXnG\nO3/bNXrGlKhXyNetdy11vx+HVQ4rSI+5IYfYZ+hh9vPpusv8eSzDqE9YD+2N\njkGJxmRGmjqqCIJQwjx0Sb4JlGWJFYkNwXm/Rz97mupE+4K4ie/8vJ2o/PBR\nzQ6GteKc/6CbdEIlnrz5b7zfWQn8NHWxqeNMSoviRCavL2VizanwxaU2dyvh\nQxp2F2sEDTXU54voxYyODR+IquFqehpmOUlZ05V2pad1O+sN8XkJUioxKIGe\nSV4xU+Sq//0nUSpVQmNyClGHIOcedr8RXiJqm1QSqpWPVIz0d+uNf3wvNkm4\nFdAFc+oUVOHIL51ejhuUP59eZ0fsJbzZCoyQSYbWUqGZh3MOGzevWRVYT86S\nkyOZ8ya6rebblUw4naGpXg0Lu2VEDmY3SPOOPrliePPQzhf6/mgG92xU7VvS\nr5BO2LiHN4a9zgXzeYA/Ly9QqE7rSXJAEGPBxC2wesXE+NWNwiLlpmR8+mZ1\nK+UazGjlnr0ggmDBbQ8QOtBOWPg6EDZn4ggvvISdPhEfjiQcW0aSAdNj5+Ys\nZCWr\r\n=VgeY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqT6J9TPHBP0vfWZL5hMdE6q7T+WqitftrqYQ3XVSXFAiEA5Ok9Isk42t7HYfI/mFT6kAqd5byCRoDqB5LG9ib0jgs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.dfdd8d6c.0_1594319121403_0.14973377143203814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.11cf2694.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Uq8/cINsUyn+HIi35tbTP9Ockd1ncXCfqXf9Kk+DA/Ab8Gu3DVstx8LsBL3u8wuqQ1LJiI69QumSSCM3/6kK0Q==","shasum":"f361a6679048edb29e1dc14d0cecb0f40da4bb45","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FYCRA9TVsSAnZWagAAiKYQAIgUABG8DHj5z2enXk82\nV8vJnAx9C1d8RmIZUED3uvqwnEhnKVr+Yo25XoqYEcJ9eIrw38CPxd7In3tv\nsU+M+YjWQSLJp8p8uZ3HkYnmWSOvTkDTsxsOY0alGTJm2J8knz59OQSYcdx2\noQ2rkBFDpHhXCSLdyJVLF3ZwWjnGlhW6mnUYkgXSGsAwfKjBt3qZnBmhNBlF\nFGpBAmOY0OPj+ApsdxvOWRZnGz4n7YGNo/9Sw5mzOHlPIcUDiXaxCuKS4dBy\niFzjAEKYYcc3/3+nlwuMJZYjPlL9rRxeLFYdDwS2DhDelQo8bEIY2WioV5ib\nSIfvzr/leU1V5wnJPWvdlOL0sG8ic/f/+/DFnT/7gOK+SPu04klS/QeDDEBd\nXzdJcHTywcxnXiKn5LMC2e22OVS9X6VVCtmox5RNuZh9tV4LO2+IU0UC/Ggl\nMpCgP9RzlC9PJfJyxH+7nlOk6izYLw1/pSr0QdUuiK7ZbvNDMUGI8mZqQyfN\n1J2nsmiPsrtal0+uPUcfyZPA/I9vNL5UOrKG0efE1ARQ6UokzWjPgrRzWfwD\nL4IZV0dinym1OpCxaXoRxfvkyivNYAaHFiTjOm+WFfDWmL9Vf4kVpyvMVSMF\n/vFTS41wH1EM86AiO2Iti+A+ipJOYOorwaTomSr4wFySS7lvk4WZPBesJXp8\nq5Kf\r\n=x+CP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJxNeGIyoaNAIiTG8FRoguN1U12HTsOlFk/rZ+eg85mAiB43t1dywYfkJk7Lzn5x8cm6bsindsme0lB+aBTR/Om2A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.11cf2694.0_1594327384439_0.4099708512408504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.436d66e9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-85wMyMENTROGj4vbWXyRbqOA0b19S5SxWxDnlMslnH4/u0nf8p3GuP3QPtVZuVJtxRcA936S+BLuk1TzYJayvg==","shasum":"de7a973e6b47af02013028bbc12de019371501eb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4J2CRA9TVsSAnZWagAALSwQAJON4X9jSLLPPMaLGOgj\nY/Hla+pQRbyu0zss9uh8G7CaP/DX9UOb64VU5eM+HHbuWxdH4bTq+mIUtIKs\nLgSUyesgTb8ZL4agIsqUWeAOx2tPyr5YAEdy/klQC3odZ6xvvUQ5193Hsldr\nssJlMDeDEJ1SQKNMoyEwqpRPVcNrcq4lqdSts+CWOsfZ1xfckBqRLFzcVx87\nkafhuuclJW0Yx5MzkyrjHgixJ66U/veYF+8AVKd2QIZHNXvHQ2CZXSg5lXir\nLPv7L7I+PMNfrKuD7RDrP4KKDi1ChfYR73fw1nnqsdq9Cf9jNJddW1ba3qYg\nIZl92uTjJvvCE6lniWQgjtwW8xbEyLufqJihQb4kDPz69R58KVV/U7wRVf1d\npwCbKpjS39BkwNZpn1MPMTxyT+LgsqPFuha7F88U04EQikyYK9DNiDEjy/oV\nRAKbHlDTQNR32yrTD+QeDqU47O2NQVensXqymjDGDJe83P1bnQzfDMwlpXMQ\nWddfpZFrblZwBpyAWSYYVQWppW6lz08EiPpgkLA7LW+pe+L52dk4mT6TEsNH\nDQC/B1dk60E9JoemzN54i4wQNU6eEs1H1NgU8R1XmLxjNceFqALp+6/G4Vv/\nlmigUXk7f+tjkCfDZ7nBkxT4OLsc4DiJOFdFIzGtpogQxSwdO9OeIETb4YGz\n3nhX\r\n=j+WK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3ozn4K3yzQ3Raca7c0aj4Y6BvVkmYtwASB2znzJdc4AIhANy+sNjF113XnD+efLhxpc0taHoNQvkqLMHahghYcZF9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.436d66e9.0_1594327670096_0.8504521753462295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.3a44d36b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6ed717ddd.0","@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/shape":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-b2Q0HtiyDbIE0O6Zu0TXae0kKouwIutjksySav7Z/9iFZp5dSGvbAIc5YwXxT2HPvCb2EfnB6ju0ZZtqDuisBw==","shasum":"108a17f75e36fa097608711466726c43234fd07a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7goCRA9TVsSAnZWagAA7nEP+wTmcU8zMQ7uPftaZAU0\nby/QMBcv9OsvqG9LJTeGWavzfb2bosWiN0qXbk414Iyk8LlyXzfcxBdGP7fb\ny9d1v9qz3HwPbj85tr0Nhn6IBAuOJjVohjyrmvlqK1JIWa0kd/jKXi4l6qp7\nUF/YPIUPBGi21PU4D3ndLtDRBym2K6gRYEEJwwoqsiO6C486dHL6ERqn5HGg\nwz0PZHFCRgNebRaW7AOrPtS3PfehTXraB2T7URVdWGscp9dkgyJs6UzoQLO2\n2tf7vKejDRe9R9FyOAdqMe8rcZCfdEXnJGdAxKfNupXpjoMw69NpG+XJvmzF\nB1WxznLT5fOrAYYh/97jtqUM8dbW1yTCWJAxbs0vRumSJ6XsBIY9KdvBsNGS\nZsEH4+kt69U6YKkCWS3qDoawO0MxROHdsn0yuKM7wks7h21Zf+tPzoIhbO9H\n7leC8brnBIQkT6yiQQ8GjWeqqTvVEJL3hJAh/u5yaEwu1x9wMUKZN/2Oj+kZ\nGWDsxkKx+CiDejSZdVSfVh9CcaYa2/Q4qRDm91Hrm9fx7pP760Uv0nVuwaHR\nNixuGXebeOHoarlOmvgucwGqYv2E1LmZPbUweSNPWsD6VgwvUE7tD8+GOir1\nZfuezqCsCf6EBXcoe/fUbexedhog80kjsK/FlF3Qk0zyzGWdEOz5x0g4yKm5\n9vWY\r\n=gfJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlgbCX2cT4sBrxqIzzu4pjKaVI2gxNlAdI8XXc5c/jpAiEAjo3SeuMPFzTKWXc6BUyEZpjE4TjImdV6f0lyztneBec="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.3a44d36b.0_1594341415800_0.0454038680218527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1e7cb6198.0","@material/dom":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1e7cb6198.0","@material/rtl":"=8.0.0-canary.1e7cb6198.0","@material/shape":"=8.0.0-canary.1e7cb6198.0","@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kdO4/GB6NEdzXeURfcKzJKBuRwrDlUsSa1VqvhPLigx4CZZsL+bk7ZziOVOIdeiyBXaqhAXCOmJhMCQedIwI9A==","shasum":"0c7c39021f07d5cd24298eeb14ebd54cf6e0ef82","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKrfCRA9TVsSAnZWagAAP1wP/1jbUEt23vuilhuYV9xH\ndeT+HKEnLDyjKYQaxW2EI0EhXAd8q/kRygcgH+lDcMJztQg23S4UofM+Q8+h\nwJNJuUzN4Drxgdz3Gg3RjM63K08hrGxpY0y0Bf3pgYa+CxZuy8kmze06Qspp\nuCbGFXj74JxjhvglNTnsNX+Zx7fAtcQi8T1Z0ZGFj3Cbl8WAvloW2n/bL3x2\n4LXTZv5Pds+ykWo0px6p1ckW/4fSuS66ORQ/M/t7kcPilC5fjeCvsboQ4Xi3\nlf45pT7+Wxoa4HHg6q7Ean0isKFbwwkeP0ESmuPDIwK+XZFhO5b5811LDXTT\nGQuU7UdfzLPYS3XwHWC9buuHShK/ww3TbDCNf6C1Tlb1Ii0nz593rwX73M98\ne4HgS01EwSabBYK30u4nicqWtShsxOIwTpVu3IpJGPQ4TEbNhm7zPBDR/HSs\nv251KjjsI0GRbgN6RzLDzItE/dhvWB66K9qi1+5FGxJTZLPr72uZGkPJTCfM\nZrIV3dfrBY76XHeo0HbkxASev5OY05qNoAwyIw7X5pxiteEbHMLhXSgMED1W\nrOItLJT2olJMBM90ApuZKQ+7rWHd6rVI/B+kWPY94VfoLwCrf0puL4n4lsBT\neE97OnFEN9WXzVUOCxuVqT7ln5iZQdFAywS7SeoNTsyaBL5h1h4oGQhE3Rkb\np2Vl\r\n=B8Cy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9mLFM0DpYZtbkbVrr/14hPQte7DXszI3NMZDe/CGDAwIhAKuZF86yiWFFNUju67YR2e+w/i+wdckk9mC7GUQTAza+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.ec11ae6e.0_1594403551015_0.10684993847026125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.17f6cf27.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.b2edaeead.0","@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0","@material/shape":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WMofSfzpgFOLILo9yQVlgexYQsyknG0wm2sEpYyMAcm+oCQ1xfJGTG9Ci3Alp6XN8xdQOSXqfhekTG5q7uXpYg==","shasum":"c3efc2bc3b93f479d7605fdbd78dbc6419156e0d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":114730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLQ1CRA9TVsSAnZWagAAYjkQAIS6GueRCig3LcTYAxbL\nqGio09FOMQIHM0K34Z/8l1je0ZzueUtIcn2MZVJelyPbOOMpyhtKhc9sUtwS\nSyhYJNbUCvN4QEQrHcO66fXF/1IfvvqRsZiVgmf/daeQSboOFCG5vu3N9I8U\n9d7FdWKuAMt/IZPiqLh8AK5IyLgYb/s/UZFvRBjWrOGHhqJoT0rTkr3ePYDd\nx95voIVt1/6tvgaC4zqlNYNDtwTQCc7kdgEqSz0X3LKcnfVI7MqfFg4roSj1\ndCk5Xc2Sw0hS8tkRg86476xxLkF/lg5IKVQKvpCJiu+HFA9FwraSSuJTTNMb\nWRmgjmtmiFTu+1gWz0M2Nx7F8KFHo1/XKo2RZAqYTM/3j4Czh8jFvFePiqwI\n4KtFoeqvhUq6WP5YysbNc116w4CS38ai+I51IP8wkIjQgUT0G3sS8b6kLBcZ\nbg0Oiarl0hfXgCXli79tRpzIad1rZNYSSdVvpVb8Xi3BIlAWZK36fHxeNDcV\nbWB3q2Z5fDXO9vUKbifncRjnhIRQV+CmXMMdrMyt8TYUXHgiCyfY5faaVqW1\nZvbtyG/v4YkiHAFvxOOeR2mcQjigJ+caEIHbPvbF+H8SX25rNcrqLY3NVS3d\nKXYPPYVmFYw+GwhXHuCY8yJv/TC4ipvVYjS4X7/KM9OYaxIGdvBeQUbrnV/E\nprra\r\n=78jn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE42u0xuBm5s8x7A7Ty9e2CHLzmMIlZRJWguc5YgdhnjAiEApFbM3ZXKJSuV0ewzSYSy6buh9fLBRjAOsWPlSlnH5Rk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.17f6cf27.0_1594405940788_0.4241974115859024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.efdfbc21.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.b2edaeead.0","@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.b2edaeead.0","@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0","@material/shape":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cLYoFaT9WF3MHn98oj5KvvkllYfiZ9adS75XRifJSsxqQJo77hASKIYNtr9DtdPqTU06wEPb3OzS//VaoS/A4g==","shasum":"87e0d1b2c10b7ae010f6875d8292fb1cc46ad786","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLbyCRA9TVsSAnZWagAACjsP/270OYZRgQDiOmveqjig\n6f5tZYNWk7+hzow/4K9U31BnpWI3mJIKg+FLpflFpHqcbca7OE34HqmZumub\n1PdKo603QMD8AO1YbHHjE7065jzse7dehd/IOMEw/I929Z36NPNQQ5IVPkxM\nXgJWuhu6VJZwuOUZMqgW+DOzJ9gCJXjtONehW6bh4BI/MHRpFMlbpEvkth6u\nydfUY6ILyydw0RJOBZF2JbZ3R4vFyuuquLFsHd7z95scZ2je5sfwqEDJuhOs\nvb8BGxii2weMWE8dstjML9kmMmXVSsMYUPz9SouT4tF8JSRhpxls6+oK+zjd\nZn+pvdwuYEbYy2zU7HKBzN4GCT+RwZcJPIx/LAPZxctHzPVvs+76hKbiPS0v\nRRkquJ1lMBCZyOrQ5z8jT3L9v/CQ5r9ko32+p0QwyA06PYv+9zh94BbxjNyN\np3zhQ2iHNGCTT68/ZFmKIYVRsyu+X/cpODD/PMnCxQ36VdHMB2MKzjyO4Agm\nnee6FD9rHN3wLLGhQaCc6huGg590wpIQXxTD+p5jQLH8L8+GSfFIVuFS3yA8\neISDLsCG2a4qFyugT+W8U815+t7qObqtzvFJJN720XZCS/dmnBS+Sd8ldPeV\nuIqOrwisQLdrs3DsvwafMtd91ugE5uWAXkmo0CFHcvC+NDhguCEBeZ36Nt+2\n76DD\r\n=1Wpl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWvWxSYZFWqMrae/F4BX3o+dokz6xkxxZT0MrKpE5hsAiEAvzQrYg3NzA/M8eGNkLGkQqdmPEv5mHE7ANQNq1LSJuc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.efdfbc21.0_1594406641697_0.2973945352588292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.bae4339a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.5dac1f624.0","@material/dom":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.5dac1f624.0","@material/feature-targeting":"=8.0.0-canary.5dac1f624.0","@material/rtl":"=8.0.0-canary.5dac1f624.0","@material/shape":"=8.0.0-canary.5dac1f624.0","@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QB53I9rB7YfU3Qy/ykgWHi2OjMJz/2pOdioMGywXj0GJLWVP04m01MkOp7BjhKF1JZeK1dDaOnnVSixLfQiq9w==","shasum":"2203a423ae2dcf57565bba9439c556317535b7cf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeArCRA9TVsSAnZWagAAnlQP/jITZfxDHW1kXa20x+bp\n3SikTNrytS8WFgqL8eVsRpD4w0IbDvua0lA6ntay3G7H/fUNzi/1vNGE5KeM\njZbOP8ZhyP2vAomRrLo5Agpx7pr2hsLL9BwifZzwliE/R0+LYaSLoQlQamcM\nwkykH9ZyPSjUvEudqXTqKHSt/yYzMsgXbrZPR+qvpIcYZ1dnlbv/dlVlKn5O\nQH8qzltKkqBEdTeBclEqLe7CrhTwJIPMIPQhdvagzt40R3zQDi52u6AbZCEx\nhchdbjDrc3JHuVAtCp6g9sDN+A4rVS3kWumskmRYo+3iQUAtXUvb6wI9XTbY\nVW3/32bHa9LqyTku4z+p4RCIib4J6xUxzyOonfnNgZuEwo1Pd1Avai27kmHP\nxUzq93FWR9IIgGT2tGJOWGkEaPEaEryf+vlRsF5rKCsKHhT4CLpDB9/fl3+n\nrj8dmwUNpnjg8HL7M5E2aZSaYS1PMkukLGYd1hkoRmpFOXnzdungyW70fm2m\nnBQkpcSZsWIYrQSoLS6eRDyZ+EL8wXRCv1alxn6UviC5skmbPOgBfTfaUCtF\nlxzWgcsNw8LWRkrZB5p/8VQZ5g3biKwdDYaT2+Wjw94FDYhmB3yPmroaqRFM\nRntXirAnhgiCHTtOjKZjjAMyPZQxjFSVNjuJbEcpk+HpeuT8BaBfo5cKyluL\nlNU2\r\n=JNmT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6BzYVMlvyLW8asJ+M2FVt24OZR2IJikCPGV0qv0oyxAiEAwZMA0sRRvFAkQ7NN2piAddTihxX4EksTUoUMEGDl0yk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.bae4339a.0_1594744875388_0.9412257080796784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.28eac13b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.e6e23019d.0","@material/dom":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.e6e23019d.0","@material/feature-targeting":"=8.0.0-canary.e6e23019d.0","@material/rtl":"=8.0.0-canary.e6e23019d.0","@material/shape":"=8.0.0-canary.e6e23019d.0","@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tJvor0Q3jNKyjRyyxJTemBgy0BpDbIqe255vbhIinss6Fccq88xfzSWXhvfLq7DfV06DQQ1uJqxxVyehiFBmIw==","shasum":"90226c8404ece5a1959b0d06a69e404ebe3ea032","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBBCRA9TVsSAnZWagAAVogP/1ZNWFxkXb+XDKQqje1D\nWHGXv0C/R21lnVn2wsRXlxPapuaHEqXSpRc53oLfXb2S0AguTTNsVsWIHb1n\nmNAxT6pKpCMpAJerR28caEi242iUhPbWNhFl1nUzGcnPLWv2erR1rBYlcFKR\n540NM1N1R+14D892LA38ac787D7xANUbSfNzjBqsSAO/aEoGcX5Jo6ZPxI0X\nBsh6bWaJXSyjjuxHU8h2Bn+NlZI5gn2yYlJTyWvgiORbfHjEmspwf+jKdRoN\n8yYCPNgWNgW+mZF17o0iUX23ctgpCIZr6ZdWKd9RUxrHiNAconknshytw/1g\nsnOHG4mLJMzmZxaklUWiQc9bFNuPWiW6/6xuFnXFFW95v0k02dJiRfP1C7lz\ngC8De0FRgTkXBA/68cstxWsS5VxQzdiPT3kmEoqfV6+CdwUaXv1m0/RVc0s6\nqy10KIvhknSjp/ZtAHOv9g9tKr8es4gVKjzXsl4kFCwZe5+K3S/ys/e73l8I\nhbW9FjKvk41NrYndksyQ3G7fXdkU0BQDiQwKhwKsBAjvIwj/7M/NHBEJl+/W\nsLqSjhsfqUNZ9o0/u+qZO2BQf49ZuW3Ir0cMC8rY4HQh/j/KMpGoWkV+ME3I\ndC5kwz5+28mtqzW60wKAxyVdbvGOI5KBn7kRmyswGwLJGtOZRl1OlzWAXP3n\nO7r+\r\n=BB0f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnatSmKRJu7Q2hG6FHUpUKo/nfpfNlEPNpNccSGTNftwIgFq1FhrxOZuZfWICwXrcTAsEoZWkYqXtdW1Ud/yfhhkc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.28eac13b.0_1594765376878_0.6521027592918989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.44966b65.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.ad4df58c1.0","@material/dom":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"=8.0.0-canary.ad4df58c1.0","@material/rtl":"=8.0.0-canary.ad4df58c1.0","@material/shape":"=8.0.0-canary.ad4df58c1.0","@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-krgulUyX8p5EPe5XQg973TRRYUUEO4nkHe0b3KCL1iCYUYgu/Lmz4jVvbQoLXGlcq8PwSdeaJbyCeXZzKayFFw==","shasum":"8ad2752ec318dde94ede2ab7f8f75a2afe6023f1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0UnCRA9TVsSAnZWagAAv+kP/2DybBgs+dzhUo2M9bWm\nvozBg5Aoh0ufw2J2WdPjZXmqssXZzzZEt/x1Zg6Gn4M1OlTNEzAIIuKFxLLh\nLKZ6m8LusBl6wi2+1UjQmY/7GHey6vxTizTll2JXJHsdi8mAPSR8mYs44DtQ\nUI2e9KN+Ip62w86jz5PjJxG6nSz1NSY9vvRdQZmlYnnB0AzhQUqOIABDiNhP\nJRIeUSFzE1gd6VROQRzsBGJTDXA2v12t/bJU4WlGTV+0wHDgTvwFHGJZTgan\nZN+QPZZ0+n7Jg7SpQZ5ooQd7FaQnRFSHorWDKSNKk3iPJ1zYYcmx9H+1oBQn\nwDRE/hhcJF31SI6fiE24DSh563+WANvWqKxM8NTWWvzEhKXInTtoJKEqchU/\nl7oIiVMpSPHR6Hiv97p7ibkKceBm8WqPgDZ9rCjxobL41bRhC6bNJLD/xIVp\nNOxDeJEhRE7pbtGoa9fTaVVLHMVdCgR9r+/XRpJpdGeZqMukQ2j6JRxcDfr2\nNcPpSck4ZeR7ArHOV5TEJW01VXgDeLDk9No0FGomSMrFEkxSn3ten2kM02ER\nFrP+6ARSOtCut6wCGWpyIh3A3T2wUflt91gNGDx32Ki2NxyfnZJJQzOXrhjw\n2G30U1egxwTT4JtT2Lm6tc7MoZ21mVDE0CLQk47EG8cdaAbZEAgO4Y6vRL98\nQynd\r\n=iC8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQsLOMKeu6t0l5X1XZLm+bWtr//PJcBbSzWyveE1tf+QIgOQt0V1/SIco8HzP8nEYG6QzqWonETVxx4O8S8jiNksM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.44966b65.0_1594836262757_0.5358419299027168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.01db89053.0","@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.01db89053.0","@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0","@material/shape":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BLmBDLJn2aoG+v07lZ40odgWSo3QBI3XMRSnTI7TQXsc6zVoNfdVVFgNOb28x7WBamO9LnVArWHCF/876a/SiQ==","shasum":"061f2ce86e111ee782144d6eda272c06aa5bb290","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIYiCRA9TVsSAnZWagAAPhkQAKPQBBKli3mbtgvoKScD\n+rqNzr7vD/aNWO2u3kcg1QDUnsci9G/RxpijyFLPMxapWqT531YYewZUp4GR\nqW0uAFd1oKYc7Oqa9PbQum0zCIG2yPWMDNHs+zXFSKrTAQ461GiLJomd7QSX\nz5ItM4I/6vbVl9rPdq67cDFWCB1APQKSQYupVKs+vyDUc0loBV0QDyrJRaSM\n5IAR3KXe0JM3m8VNEq6YVPEdOAP9p6hyDt97PKnk8YzAq/4Tc45Wh8cdzdLu\nUehEspTIU8WQ9CoKYMqONpv3CndlOp/rl4p5Tg5YrSzVKLfTlOecf9AmXPjH\nj/t/R67Jc7rBjFNCfAbwQiMFeoWOvlN6lcfqWRODb/PQNjOD9F36DayNSA/x\n56EVGjAEMCtawZi7IT9avhu+pgziQeW03CUU0m80yprPikkmiBozJf8YZLPO\nA+/Gt7GpiUTcXzdcjozjcr7rgXe9yJAEqOgfH5qIV9rzd+Kkl+BCZGyxNVkS\n2A7QN3FZHTr7duoF2hB7vwp3sCmyb5AqIJJDR7e8MVZ0zGibJetbWA1Vte1M\nSR39gpXXv8HNL97Qoqaeb20BoA0cujwZFcDVqytMUVNVSwZEy44By4/8s0Um\njReyQ2GvOhAvqNnmYjs/Q98a7D3t2uqF1dxkyxKUKKzsK8Pa6DC5ttRtC3Vs\nVlN0\r\n=2dzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGtDKN22MBF6bBZHcrCpi+AIWLOCLfBEn/Cq9qCcWulAIhAMXD8Fj33mCbdlIaY+f1rbiLaQkRd8S4pMl8p9umPMZt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.3ef0ef60.0_1594918433672_0.7656751313680121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.01db89053.0","@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.01db89053.0","@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0","@material/shape":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4M918g5p1pOcSPQVcM2KAS3J6aqZRJXEf/HkEPLtIbKx2156p2jrG8fqoZL/Rbfy+2QlSaFCwHF89KD0AO2GSg==","shasum":"8d510b82e0a1195ac624b99c0439129cd658688f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZSCRA9TVsSAnZWagAAVuAP/1uItwqYSnt8AsCaah2i\nqqAC3Zx8fO6cqNJuqw6YQRih++nXUvDebWFfaCWVtnzygouOruPHnym6iNpE\nJXIAaFMI4eCSowI1A6i3fPC+trIWcvfDl68E74/Yf2jFQoSVoYfD9el/K1n6\nX69Fyno+y5sAapgOfHC7dbp0WELfo77V+P6fnNJl2Zs1J4YshJmE5VkUP7sn\nePXO6CwZmJB8P6tC2uaFoMtBtMgI6vZ71HgNOnmXEDqfC/hu+Fu6HKh124lQ\neUXIWUX4fk2stFCbP92oHiHgw+YSJiy2sfflOyCTajtj2GL+uIM39LJ0yP7g\nWf72PxH9/wMaZNRthcjZOpw+HCYQc9zyHfbw1p5VV3G6sthNVOR83yIr2Izf\ngC6F/Tys6s6lxACrgQoQoR5On4ESCu0qqASu5flHbUZn+pQ7hxcT5/k2No0Z\nwT2aiKq1jhJnOVpUIIgljaKcMwLPChBR8PjlZzTknnm0ZVTd3/Ln06nnaApl\nKScLEKZyF7GspnPaNLiV/Fn+sjfUlRsSke7V2yyB05cbcxbJcXPk9oSLThLr\ns3oNbUKl77ET0zrgiuufAB3KzJbEwrKb5sMpbEP2+CjzpYJZtQ7g2eht11hy\nCJhCaV4PBBU9a/CakERq4ir7SW5sPlxfQ/Jf68V1AbkhiQ59cOxfyy0nwaIK\n7W2q\r\n=wtrl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2MfpIhDzffiNwfALC8PTkgebTXrh5up7sCg81jwD01AiA8rJulVo2TwW2qjHi4HYe5hfDGX5n38rNNai7mQDvxDg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.fcebf9e6.0_1595270738533_0.6252024301227577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.b6a772df.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.fb5a4cdeb.0","@material/dom":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"=8.0.0-canary.fb5a4cdeb.0","@material/rtl":"=8.0.0-canary.fb5a4cdeb.0","@material/shape":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ISwQFf6zoiq17sJCKb+ebgiYftumAcqfTTZDRpylRbZm7b2cVQPZ1VJKPFcma08kr9MXNSzar1sXRNnLUHcrXw==","shasum":"74ee50cbb7f0bc3a8cd812a5ca10253466bfe70a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh6pCRA9TVsSAnZWagAAi3oP/iX/4tVjYIvyYlbc0bHL\ne1CVLgisgqMIzK+wsp9SNKe97d0ZVE3Fr0cW9L9/IfxDkBR6hwOtsxy/XxeK\nzfXH1cBCHfj6C9Ju2g3B2yzox5z+BuypW/xdqKt1eKydXbh5I8DcWW9u70x/\nGHUZFq75NKVO6ABH8ghAdzwi8FNNOV+MrQrUu5TkwbZVET/UR6uBS9zWh3wQ\n6ENO7H43hFdc5mexoCxMqr570vDVpuHfIUyq5VcCPvxrxjKbtD6HszzC6QDd\n6NLScVt7Ne9YA9Fgb7L9tT/ioBM+gZJjoAl19BfGJUBUZIDSMcExgR8Uw9Wu\nfXS5PJ1ZOeLG0ST+bViuk4VVehyhj1yt+5RuJdHDsgqVR84wRTVRU6cdrf6g\nTESIdHkJ1hRHpdK0A/zorv5maS4bQ+VPw5FFIvZlI6vH4ja/O/FBLwM1tyel\nEft6Mzv+ADkkeJiUMVB/uGlfsNL9T+rqMBoKd82dLEaW6bHkE30S7PiI0nyD\n5TyHF+C/Scvr16ydFR2WRYdxvc/Jm8qfzkMh9HwJDOPxIHAn9/AwsiUkyoSY\nldQsBe1/wNaK8lxyT1F3TqFiOCUnaM764ORSp6ddSLTnl9CBYfyfcfzP80k3\nKQW2LrRCYoS8DfZuyeyxykSaIvjUa0Cmi7q5SSgPNVmC7+EzJny0k1KJYvlq\nkzSx\r\n=Wh5A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8bcgPcDKIT0sVz6ama3AXuvtg3XBkq/Q84g+NAssBDwIgG6KBAIdiNCboq0LhZqoahPeTvv1tiVLuu/DakGQ10X0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.b6a772df.0_1595285161370_0.5403836902664618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.abcdbcfeb.0","@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ILFAPn3L/Wu3WvX6+7GDjbYqecQiTTq1Ccav4NLf2vGH1TNqHwvvpaN35vxLVkKe/TUD0/CLDDKwfffqe7pBzw==","shasum":"0b9ddcde0fa312d5460d9c6ec26fe172f871abf8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxp9CRA9TVsSAnZWagAAitMP/A1oEtFiGSxQvzSDO2L8\nNnon4wRuYsnwuknimSr6isZJRaUsRO1+bsg2NFjIgKc30Ce3OIWMsD8PWWRV\nOU1JtdowA63vnyVreEJ45IeJI7BnTlx3Nj2eCSqwtzJ9b1MnpocODTH9xPF4\nXzbz6d6pG5LUmms7iJqFGuCMOu7DnncJ4OzHHaeYlPcAKUbjM7pfyItR6qUT\nEiDAvCl3BFE21PtVu8PDiI3rwxR3KW0zRfMiKzoZrLEs4b0um31uQ+uyy3ar\nO4LlyYoGkFgX0spZb0mZWEY0I+V1wdzd/noVqrqRl8ZWv8CK6UjAGQDOYy+6\nWWylZIJIboKUaWsqbN5L1ciiIB+0BQHDoIiYa1MJ9ADeaMuAGkmuUItzvZyp\nfAL/k88YZTTmYg3qYfsTUbRM+Tp+nIZC4RtKP8bkp4bpF1Abm23irQzIT8Oh\nFMl1iQyhrciRsCH7DryF4k4l/eC5+4Oex4/zWJuf0g5CnBpvYE0JEsLs3LD7\nadmxUDL++tlY5zLNOReV3YfeLwwiUUqk9ahZcD+jU4sVe3/TPrrNS2XdJizA\nzEJGSjN4E9Prskc1CfGbokQpDNwa9ukkqs1MYKO5vSJeDvxP98Ru+dyFzJhc\n/Q3HTnnO5YEXnDjDmag62q0j3akRRWfZvj8LgOD/ozTMdFGY+nnGFlMGYDso\ngxMG\r\n=1zvu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoBOsBW9rFpXdjgYFtRPDB1jQ5FumxK8O2O4C4fZDAkgIgFR2ISwBlBGpZZQ7HMlQtqOOHeUwdaRlfjWEsd3CtmTk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.f6a6ca38.0_1595349628796_0.44871463567078007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.647dd6b7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.abcdbcfeb.0","@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YsfDaBAy2LfORpO+6dT8rmwQSYtkT4BXGA0NlM288AYrmBJ4NlP7nJHNZ01I/BBIWkvCx1TpQkTfL1oXrvpLgw==","shasum":"c7308eee30a9a4f485ca4778cd265246d604051b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzbTCRA9TVsSAnZWagAAXXoP/0l5xKCzyfYp/hdRL5yT\nUHYUDdYYpDu5bCiwMSxnrFBhHSAJO0+w00T+lgR+D9f+B3K2A02CmLdZXTel\nu3ybTC2XfdQ4vzvJhsfNrPARy448lP86R9qoS7h1llZfR8cwZ9k9V1ZYislh\nCck/5fSaXg26zoHE+FcodXcqwPdNWuyf+Hs2Iiu1LvFR/EvzJsimF0Aav7cx\nhv3N233rTWGKoGIpefMFHBLiEcRG7CHOa+9Vjehe9Mi8vSnc/DIR+4q2Sp29\nr60lj79pjUKukq7BfnNxCxG6kIlchEplYM5TWWml+q4lW9tzkHLjPyqSlnuj\ntzhwysB/w3YfyH1VVq/AzD+psNPxhPUNyOfnXdotXQMDfEPVOUL0MVJ3YIqs\n8Gkxvoi9xCJFCngl67u+VmmU65Hkx7Nr0lnDNSJHLO3gaWmE+xR2LfyuAzp2\nJOS6d3X3f8wXBGFlIXyIg/G5o8ORUTxVCM/FwxJqsjc3/Pf0Z3h1wkPwTnCG\nYqaSmAUMW6Au1UR6mRfaKTdDfhcaq+ryCM4rvPEKOfrqdkb8pn/y7ihNqu0D\n1AcDXZjSJtD7eEczAgcEiy2K2zx2NxhAti3Bi9yW95zDr5rxG/ovW5fIbhS+\nB/SA4Ism8K6GVHeSJjx3YCJ+DAYMZY1PgXHXAlTHzwbdloXAnWJDHaLaN3nP\nedfY\r\n=OU1y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYQeeCqTtbje30RXgcIqekqjfTE8/6ug7U5BRpu88osgIhALpggywE1MMqURjiYSJvBDE/dlvuVz3rs2YHvs2+dfei"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.647dd6b7.0_1595356882703_0.40696226553197845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.3cb7406f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.abcdbcfeb.0","@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oRnphq8FFQNMQyZgrD1NtIw0SqeLjgUk3xGwd3qxrMGwWKjL/DriabvyE8Ji3qdAfFaG5zqNwUHt11asjNl1ww==","shasum":"f2e417450ece7a26a6822e6358ab8d95327af292","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIvzCRA9TVsSAnZWagAAUFgP/3D0Y0XKoeJKfiYcySPA\nSW65U9aJWDC/cxEbxtphRBWhvhOo87Ld3CFid6V/0s+NejK5it2rJdQw9nPL\nRJFzZ2jUOABPXKwlp0LXAySmzjf6ILD+GdZc6ZSbctEanCnDclUgZEk0Bxt6\nUjt/hiAneJdsE7XO0bzLVj9PRGpm3ebi+/LdFBzCSrgzviFXssASwriNjAqT\nUJELcoPFVqGkJuvlm8ZiuCQvAQgIAXGbM/MMimKBPW161hmdEfAmi48JT9nb\nUtNYor2suj7olfshfSsuBLk2KUSYVLzQ+Q6WWR5RCUEB1Hx6KHWUfUDptr1N\n8lfl1NFbn3vJKg4pEFWsQk6jFPVjRovswNEq/TToNCgTdRbHiDbRZtZdX8wU\n5ioc/AgEHK5tHXEayQuh95n0Hv0Z/zTGgEWqvUCNmZ3lGPW6nzh3bqI3Wdwa\n/pkI1xRmcwIwVqlMQZ5QMiX61fW7IUfhL8ROlbxxprapzozxhwmCQbvJYRXD\nJbYg8O7JGwEqMvJ8N7+xddHO4l/yTfPsLdgbeT8SHb8ig6HdJt4fbNPkO+Wp\nTgfaW20r+ZL/rnDWOalNxmOzciN96EBijXxoOc5lSKTcH9aSaDHTPmbXuB+H\nwwJqv0LFa/JhHtTA6KL2v4shZh4doke13ES0iHGvgsBRCBVyMD5H9nbe6zT6\nnKlq\r\n=YgLv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgfX2FHy1/TigOvhjSvVeEZzWLSfczk7jROEma8274gAiEA7Acf+Yl3UOhRdY1rMlsXhmbZmOFZ8HGQm2IxItWUH5A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.3cb7406f.0_1595444211034_0.19276161979756057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.5717a5a1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.abcdbcfeb.0","@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ls8mfgsnfMENGLQkXt7TcWdkM0kEMfG5d7M2FNOqkdduv4XEFqlTVIbOs+1W/IavirRXg85gNbeMmKH6yOW0NA==","shasum":"8e8bf6f077ac5bd6341dc5a031cc271927e42b5b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLITCRA9TVsSAnZWagAACCkP/jH4h8KUO+j4/RRUZrwl\n7HZ3pESStc3rORKiuA+Gbn083cAgaMHMbF2kHuDkcqhVQF7WOYxCA4kdHr/C\nt9HnWjWBmf/ULllyo+DkkJEkIGrU2R16nAFow9CxaxgmMVahil7caRUvj6zZ\naTXh6ZWKdawpm6zrKOZMDBkmiv72/FZQ3LpiibvPhECRTiDje7g1NU26pDfw\nkiqOGf+kAhm+Bgo+pjOrR5kT6OkJEAUQSjaG6SIkH2jIiTbeVYX76748+7vi\n2VeXb52Poy9h9kNc02jiPvCQolWBVNBI9wHWclzAjcdG9YAwWcGEFeOpk6Zh\n7K9XGN8ELEiyiiDszZyO0MdlOmtlzEbKe/j2r09kuZ/fu5hA+XQPw/xvX1uH\nyBut7/ndiazjsXMnxyZkk+Spir4BRIeDXX8gy+CVmnt2EbDOF5MlT8x/SC6v\ntx2wHu0Qdskp0kc9r7wbsprIF/u+wC6yU1vOXrDTmrQaf2q9+Kh28ZREuaEM\nTvpcfVdfeauaUjXkNuDcTVfcgvW9iKBz7EePCz2/K3a55ZOwdQVUO0PZG1jv\nocUg4mf5crB5WKkOB0iB0ObY64k86ArAkd5ntmcDDwQT5myDzmenbL8t4vSM\nZlK0gSJ9PEmnESTqaN0y4kzYAE/Oe8DOpyGVofnMIJcnIRuGFXHiXX2VaghT\nquQU\r\n=Ju8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxs4IVr2YxPOvGRAhQX1McblA7UuijnCjA15aq/7/cTAiAfFPNvoKN7PlmPC38kmzmO9i9Zd7AjVx6jgWVenA+yBg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.5717a5a1.0_1595453970482_0.054060097186631406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-By1t3ebPlRbJsn3iEPJkgdgiw8fXlGRtQBG0avahku7TQktWueglP8yZmQxhcdW0yk7mQO+beQBOBref/BWsAg==","shasum":"8be9e9389ff325c5b7b5113a6d8e6e421099f79c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKFCRA9TVsSAnZWagAAqBEP/2Mz5NGgLnyinmtcM+iq\nGInj2H8CLFBdKEVxRO+4ktBrXS7PPp8PTqHQgT8xKo3tdncDOTvHLrpcL22F\nd9ROAxzfBjCBvQbX5kd9YtE8rjOykTO8sbX0mZG/9mHAcEwR/IZtq81Jdff5\nhxG8zDchyqwWE/NaljQBvt0IpXcA3FsnDkBQyCvQPwuq/P3hQNsiUATHb4kt\nCAVmgZYZEz2rJ1LGemsaYj8WzhD60rRU3HPc9v6teN9GRZf7AyKPqO7HKm0L\nPzmgzi3Vprzg6qD/HIiQrWgskuko50TFt+XnR7yIJgdKI2nz5UDyMuiglu5o\nsEmbSfIJXa2IX3OJSbBCOlvPxoGqqXeTuJ7WQVWC89YPkZbDU+TqLhq5nbYK\neS6c7bFz0yD2QASpkKeavtqjbhYGREwaAcgZLIAYxRcbyPnceqT3BrK63Njk\nwkce+9R0CSqCrAJlz9HN79pZDarqhJ4CePktReZNDlwjxPvVQmKuG1W6i3cu\n4Xqt6NxrlU/5eRQWgMFUtJYGID/O/6VfyIz6nZ71wLvLEA9ZMy9xRM5AH9JK\nWhJsH0t+XntgLkNb2520CzkJ/WnpqLjYT9/PwtSUzEBDX6zKywy7D7cevERv\nWdoZcBbuRAYXnKUrtTK0dT1ZJHYP+YxNhMhk+nAuLLzifgL8NBKWE/05s58J\nh6Mx\r\n=UNU3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQK+LeWCaekazV0obLm7x+y/uR49c9WmnxYXYq+wyqfAiB6cm8+0qyQt9PxQySL7BXoCx74+joQIU3B/U+7F2L+8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.d84cd4b2.0_1595454084593_0.031014351656491135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.f279e7fc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8DxfiY3s2VaX3QFCoog/KA6ZFp9IlDR7YqgIyW5aLomwiHmL2IKoRnOLKOpbJKl2yCCIisL+JM1LF30xdFfZhA==","shasum":"62c8127e83cd6185343b673f9e9ba4397059d248","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLbwCRA9TVsSAnZWagAAXlcP/RWG8Rk5yALJeWpSQpJ9\ng5ft+NU3q7dABsGG3hI8yFtoeYfe2aubaGlnf8FD/cR+mAsaPOwPuBo4eBKr\nIuCJp6l20Vo426+bhXUGgTniq5GkePIpBYa1UJ6ti5FzTuGxhkdn2JFMPpB7\nifiM0AuzBGpg0iIy8Hsq1mZfEDbygAhNruZgmuoYFg76FQH8MgsdNYp/kGP3\n6BO1uoWuMNKQQ7c3hgyNNRQj7/elUg/GuAedJ67LEIpABRRP3yiNBeH60O6v\nhAX34X5DLCJtsgKtf2e3hAfgBYcPXjIU8pHyjifAfFG62EHsqOMGOx7WVW0F\nXqhJTLGPIbGwdAGxZa80hOi2y5qr8eYu+lUdry8lf1cogbz4iKDCFJRvRUkD\nF5a5ObFuiWU5ONHcpMi58RaxKYWVsILqQhN5F7wKZAW3cTwwBkm6C2j/P3JY\n2YvOQ1TuiyE+vrKjWKDiokeHyQO75DRMeSi1j1/Ef9a7iZczJRe4nFT/QzHW\n287dW3junueWWlq1n/0R0yki2y4tf23gq2JgNHvA9//brZJv4txWy+7K93OT\nSA8KTHJRvqdp/DLqKApO/HuP3PTemjrIDxBBc8LNAUpCa3sxi59aQM2DNqoh\n15VCCz6P8+TAXW/FFwJRssaMEhC+G7t/w5FxzbcmcqQGubIOdY5fOUOOqnoU\ne+kj\r\n=7jK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+1mY81gBerF9FgKuIoXNj9tk/o4eKqew8fxCmYOqPZQIhAJfoirRgbvDnH5xfIIijGPGNvMqf1aMweEDJV4EuPPD5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.f279e7fc.0_1595455215875_0.15344044445138638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.f181e3bc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-D6RhdDpZ32mPSPltyhfBQ+HTPrtUUCfd8udrv9EDQ+1qkVmkMAkHva3fwcuidq/7dy5/50obbyRoNk2Jw4A9Sw==","shasum":"c9a75251d4e94c569c4e472515b657b6211417d5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLdmCRA9TVsSAnZWagAAcdUP/i0Squl5XraEXCQzchrA\nXgNhrgAASZXN6MFjCGcwsM+vhO8GKgLBhElj3lm91872iq3o5d+UIBzV+5nt\nvGEyfToKoauv9gI38azFcru8y6qbAoP6UbTZMhFYbHU+E76fgbbPuiW6tsG3\nqExseDGul2b9oa7F0E2pw3mhFsowKrCAOAakMTIH0L3VUZeF4LebtGVeZ6/I\nng46NHgmdx/ch/udjHSefkN9z7A/tVPkE5ZgkwGCc8N1yXhys330+9RxrzUq\nr1i1jtxITqQUy32oPfZ6khH1fkedtFMI1PFVVzCSxwe+XgXAhL52o46j812T\nXHnh4CEVQvwxFX+etTwimk/ZtJZQvJz+OSa+6PgMtXWsPuLpwl616qhR/aMr\noU7EIpbh80EH0TirOiXdlge4G47+iuQmUWU2UARakzrKgMWLhlyOIV8yfLb1\ngIWXrMtV05x5slRhFqFaGsJv0toUIF8YD40hsWX5juyZQaBpY7vQTgBT7LtN\nUv72OPpep98NBP1R0758ktsTF8FYkacsgtv4sIYlnsUUevAmX+A39Yp7FVM6\nel5lpOFWq3HBvJA14Or/Oes21ZyYWIFc63+8hWY3n4bAd3ydl+mdHeW3aFDq\n4Q8MoeeuTS1v9sVSqwX9GKsTfDPJXiZ0UysnTlZ6sv9Ij8Oqh9L0oQ4GAfbM\nSczm\r\n=bQvj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8XU8KVb66vaRr+9G38RlhL8RlcYtZ//fmBcHXZUsDrAiEA975P4tWuXf9KjR/pNJ9Wi/tt66WTS18i2nDeAtwSqSE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.f181e3bc.0_1595455334382_0.8711981077895408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.346a622a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CHfu0Boq+8ab6931gHj9+EI6NnBnoWruGCncQnfixXJS+SYHj9CVY6tp4kZkVQ2QJ8Rh2gEhOLFFakHruzQvOw==","shasum":"a84646fb5bd56a05cfd7da6e65f32dfa8bceaecb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM40CRA9TVsSAnZWagAA5PgP/0/D4arBf6i3AyGV4Y3Y\nbAhyxGXHPtVRHTNh6Fg3oJYnj9FSddNdYLwFOkZX0LN97SEyFSOLqPEn8v+u\nfKtFpxm4N/xy3MKrF2GLKHqLefpBXme6LNAUa7BdC9KYH2ClB6xDOqtjL3cI\n5do4AH0B6nVqKit2zyn7Dnlb/6C3ipPUfISCil+RRAfSv0qQ97tiYl+i44qQ\n/3hxcDtrSiFli4pZO7urpRptB9xCmUJ/bwxFfy117KrqMYDFwipvlLYuGzzC\nNPPGjyb6RkHm4huk7TGO2VvRWvqBTlwMpJpht6H1NxOZBWeBDwObtdO8Oupo\nmeEfe3PoxmwX6AugWVMCBwwN3PVOyJ5QzP6HsQs7H66zxEC6MOpJlSvX4Jty\nFdi5lmryN+mC2u95mj961KpVB37HRHJwitHc8eAMbFbRy7/QCnLZT+nQV3eq\ngcAgnu65o063J7bjx/sozX2IKRz4EDek9yVtYGIN1t26J50HBajO0iZ34mP4\negUa+s4HghaynT3Aky+A41t0RLHP9pHbkQ7IJHvogG8GEpJYPj3WTeNpUTC1\n37Nur0TqXjKpHaWAckwWsq7XC6f1cx8qFuUIYkt/w4TY7AcdDs1gV3nZoWIh\n25OCqFsiIuozDFx46VhyqDxRVPIidYKd9T27ZZBZPPBVfX5IAx0y8SDy9/Vw\nVzY4\r\n=q9LX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACVJwfa2d3mCHid6wf6DHuHByphM5XAr1dE4dYoGB7EAiBSMD+U1YIthdbrqglN8dx5Oh+8r8kdw2lc5ZoJfXjZpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.346a622a.0_1595461172311_0.35323696313420205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.c9e8a848.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VgIw8ijyZo+bnUgEiCWsEoFhEzjnpMOB2Gbz8psGrIfvwsdtbZVPGidLIKcASW+30kdqVPe6pqE9M8IP1UVXlg==","shasum":"253712bdfdde03cbdef9dc0c676d67f02040fb33","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONhCRA9TVsSAnZWagAAME0P/2RhLE9hiEnTUBXQQgE8\nP2P41MEP143aqoQMYdjUc+c6znUGEK6+tUZ+viql6K6VkKFX6jzU4uxwz03S\nM55c6B5/I7H+dKFZd1pF9mROckUZ4mF2+lNZXq8771PjIt9hd/YRIu9G03sj\n1Hx2T1S9djMN1CIsJSpLYF1REIPafGxofis9jKiYgDhb5LoBXygNiE/plF5X\nnj7KWRQRudP2KTLyt2VtaH9Qy865ePOFEzgkydwfqb+mz9yfKPmoPx6z+WZ2\n/7f8J2jK2MaQun8TKMYet/jGXnfHgPW3S1+1Xm+y1nitu6hFf2cIV+aW00Sj\nNz4+Bwm3xu1KYtNzx6Purexl22KqQ0cfy+DOKG9dWKQaQvqRO/IoQG91Ner4\nY5N7sgTlPn1DsdzhB8/koPNtHLrBSAa8YLHsFNXUJS5pqNw9dFLyVUy0KiZU\nnOGzq45KLI/5QsgkiDb2pNLMUX6BbPK0GrslJbEWHkzTp0XZ5DVn6idMxPxQ\naL2dV1S6x+ZZs5hVOfUUVPQrl1FGM/ChpTWw3VUsS6LorVA+d7UAV8Ykv7aV\nt5h9O+6MiFnRX8xGJ4FK3aWtE9gJkBLT+V81CXcoi3YJGZvU5jmpSn1gLNA3\n1uToxdq7Cl+b8Sg1cajCU2BB3r58HDSpNo1qo92PVrYNXNjosLdb3aa1rkrK\nGNOX\r\n=iM5U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqpKBJpdleXkfc592OrFVT+VXLb1Kt54ntISrTgTDdSAIgRjPVqNz4Q6NmqX+uAMLMSZQ9hD1sfJQXojZlj+JnwWo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.c9e8a848.0_1595466593161_0.615762294039848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.718c385c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-q70tJQgrOJX0VwsJ78lPnLQn+rILms8bDzVS7V49PSS3NTYqR5qzxpB1jtEyJdyB8wjcs7qssu7HhzSklBZZOA==","shasum":"32892320e789a50a376bb98c75251d9543b76ab7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2gCRA9TVsSAnZWagAABgoP/3IszefrrYRSirroMf+G\nkJhelothoLm760eyuyHtCr4DyA1kuEIWFnFk/VbutuRd0o7+nDz6T+70hSBT\nlIX2viQNkL103poqM7liY0FKYUG9fXCGNnh/RKhYOtahbxeTQxWn1HmkCtdF\n4i/yXcua3uwd/4x6zewhHSZcROlwyjTh5TZFwV2G2gf9AhVEKe1Gs/cOO1Hk\nSl3d3sudIognWKZgVliOdMrSRLTzzbBsa9wJbbHBKdgPeD2ahYEWOrqrKHqH\nPVNhZIqe2mHh2xOfIytplLa7yRlfguyKlPKLtDBpPLkQVgwFFCU16rq79btC\nQvOptW4r8OSr3LnSfLnluoCnidw5KWLGdDmbBqp0b0lebjrjnPX/zvGjmG9n\njnGLGvorUhnHV8J0W1lFU+y1klwhMRJwvCc/vi1pr3Z2oveY+Ev+1KSwNox7\n1uf8LD+puL/h9Ga0GiBjZESm7ec+z9P79MWOyL8A1usHSVj19Yq43+rQg7fh\nKCv7f31QX61vet+i0KOncilb5X0gguR2xJv6pDhfkFU3uvvWpugFNnwRK56e\nBVb2y7aSfl/J4WTNLgypBqz0oYiHE3Gady09FDK6cWZoe4mojiEbpay9SBo+\ncYYIzffqkpJMvdIcYhi7aU3XvV/rSMId8bLUugFcADCsyT9kXIBtOD8xeL79\naRr1\r\n=NIsW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6VP2vurP/KonySDW1GmNSKAN0PLYulqImyDkvC6pzWAiEAi4Eub4jaQ9fKZgBW0xtdXIDrHqHdhA4On3MleVUxYws="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.718c385c.0_1595534751644_0.6171978532424656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.cd516a27.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/D/S1cCnTCT9GQrNE1MRZ+3ktzeTZEdCT9UJMSvbxN/cGom1MnFelM8sbumcgNhQPKr3zMSZvsi+AIX/VTPsqA==","shasum":"8d8e20f270a126f8cd43d1411952626669bfd0b0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIaCRA9TVsSAnZWagAAp7EP/31Z3Q/Um+27Vw6+9HOw\nVALIWdHNy+cHe7Vt1AO02G2lPEDRjbio0HeAbpc7O94pZPClzgubbwJ4WEL7\nntZ7jYZc1Ax5LHmR143fSTRaRZ4BzWN118nCf14LE/bdbRCm0AKhaUTjNQER\n76wzGabPk5dQ2FBccJqCmeoxUe1v+/P5+OKPmbzRAGlAE9rJYYSvGGrCCq2r\niMx804uC38rgxnS3neZ+Ak3cDABdXs/rI4LAp3wFMhHCd+e3B5vfM7Glf6S2\nhflKLIw/N3LVg4jVUUhGmYi6gqqxgSUWZX5BA5nUuFsDx4Fc0e6axVYr7d3G\nfVHrz5SOFXjWjvms+VfujeYfMh/bgQ+in7iQIEO0ObP/aCrLVnWgKCOfykJf\nrum3uNlM5OdBbKjHNw4tlheevdBCREKfPUNOliUodVmMQcDBO2HB00T//m+m\njW+eK3/23Jhm8OTyi4V0I4KBdyXcrOfrje7ay5g+zEDjB5oAYIlXJLzx0L50\nENtjGfzna8GgDhf+83CVqHhcnF8isIBx6Xi45EigAwTcZ0mHJ+1Ed3VNkN5s\nycbjPIlp8i4Pr6q6a4F81thIsqVuNwVd15r9jnfIdriqsCKIRFfejVwcqrsa\nlPlH9c9zTg0s4iEfCQN17k9dzmYcGnAHPd4RjVvRosDoLYVh23Za+bWw+K+H\nLCYq\r\n=lCl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2UgPHeV41aGo5GFl8i85rvsUS7NGWEmYs3mdHg84spwIhALdqZuGCCbc6YPpc2KtX+HYu/DYwcoF6Wo1TgztuHN0f"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.cd516a27.0_1595617818380_0.9234163500726595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.1f082191.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7EPvI8jMFUV5z+o9wqXIIJts/OM4EoLlr5LfiuhXiWEoSsa3vwhbezmKa9YBdcNmtkbguhVIHvHNAlg/kLfhqA==","shasum":"f76b10a65f6655715c2c3da12ff8d90678bc1091","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNeCRA9TVsSAnZWagAAmQcP/2Vhmq0+jOk3TeUHozt1\nAOQQSShaVRcsMLcq4BkFribF1ffqHdRNBUw5pDsNg5fJpvBx3Wm7LJhy5vvu\n+d1UP5yYOarSOzgQyNMUba5rcRtQHDPsJuGjNwixmWV1s6kUmQRUhiNg8EMh\nlQYuns8oV9pw8g/QO877ADX57B38DSPIavgQJihbfmpGHKihtU+lJlAtYKIo\nNpRZySGJ2v6iookQoZQyRUjj42m7caaACAUwO4RBSAroAEeLJa/Nany/6rv2\nqreodsBYD4ka5mbg/raC5bYWY/qjK7CnZou62RjZVftJS/paDakqm1Zu9zGY\nsb7bzLwOl6w71BXQhfQ7HqaH2zWlVp2d0bUOfh4pOfd4xpweoBkOXqPVxy3L\nsg9AAe5QFM3FtgimW+g+MmMhxN8qdU+LhXyeIo8DacJo61hkQ7moJMgZ0fWB\nQwpzEn4ZhvwV5cxyZK1v+OEcjSxwJydFr7uR9O0MAeMm4TV5P4nEBo6ZpTTE\niq6SxfzKwZvP9jYwEtto28OigerPXjBPuRf1h2/Teg1W+khvLauS3MPIYGTR\nnLCzd3x9aAfTfF6JyetiDWYEBZEFHY+A3NclzkSyD6Bqts5zyRzAUZI/S85g\nb/GIzX+xo2C/sZ+esvxqH6PBHVk76J0rzEIiI4FdDwjPMHpL2lXJhZhpN2HQ\n5JuY\r\n=p8sY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSuWPevwUuFMt7CXaxFY2cFeMGbEd8L/qkjxACnOVGWAiB/wxSQSH2DsisN/zVJiLapNtXrgfTo4xt61BYWY3HF9w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.1f082191.0_1595618141657_0.14914182696473044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.7bd5075de.0","@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-94FpoMwDVLQ+nlMix/FSptQ2i0DRrBsk6P3YwErkSMUWyzcrhBnsmWbozfU6uH8t4YHEaLJk8cqea5K1Y65VLQ==","shasum":"06e27a6f6c54fc98ace3df7d4dc43f0d396cacf9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":115082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSUCRA9TVsSAnZWagAAD98P/0cuM+/ZVkbDM93PN/1+\nZzIIDoVBSdJ8bypkvYpinU+pDbDGKLOqSD8diB0VC2Lof0GxMKaZxeYvqfe6\njns5R/TE0Y3VyGwbRAFRHJoB2Gcny7mgCtd7aE0gQeisseNIxxnV8ZxcAAqv\nP4lr74DxsMVpMPQGHcEmeQ8+jy55ghJPTjrtkn9/nD2KAZ2VWj2O5iZIUL2z\nA83oehWvAJ2yrZd9kzDLVBBuYj0MjXba1eHqHmZubcR8JwEzGSsBN4R9C/Q0\n3ffIiJp0qb4tK+ltPZkkQokD12M7or80QDWPCmcB0WGVwWcuN0xFmpv6mu/+\nK3Wx6DaOqgL27AVYO8j8Fe2vsWAZJ/KyFqiwSlXy5iH3XfE/3czGoBXOxmxZ\nFF1bp0qrV4002c+S28EFGOrB0DvWJ+szwm7YPA1qg6DGTfpdpqbBrC0YtO+l\nohVBT6jrXqVwQcuX8DhhNpM93RlaG+jrkkkzysqcXAyC5GzPG+1QAXUCWFxU\nGa//MUoag2RgdxcYaffNunWs6I47ytmnFQPWnt/h6churU5ASIuVWp14gkoD\nEEw+mts2SLD6AYtmTvgX4qf7DSR2GnwsQd8stUvM7pDO8uhqoguVOm7ZFeZx\n8SF988/H/QXMCkYk/umB7ZyN25LdtWB1GnAOLvt2mzZgOLHCOzvunOEPTmFz\nKfwf\r\n=7fdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbZ4V32FLsaZMkbPEZpdkJzOCJVDf7PExpJC168qTBPwIhAI1Zp84joaRqgvXm9UN3lHS5iy8lOQbS0woxfh6CP25C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.ea3e82dc.0_1595618451834_0.6279400315199779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.94987b64.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.5511e0aeb.0","@material/dom":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"=8.0.0-canary.5511e0aeb.0","@material/rtl":"=8.0.0-canary.5511e0aeb.0","@material/shape":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LQPAWZyaMM9QS+8ZcjJpRcrqXMNL8niVtHp1mmhzJcgju2A6VmC2mIR97Fl07ckVWEWphtqFpaH+aQ1IBfpYrQ==","shasum":"83de6bb4037987d6dad6027b353d8274d827567d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":115400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PcCRA9TVsSAnZWagAAQocP/RWphm5jDWeM/Mkjea0I\n/9LjNJxn+JO6ZmdFMPpCm+K3Lou9JqsDK/4YuI6mMXOhihEaU4GswlEAJy6c\nL2FTDJ2Sv3IZiNNeFS1Y2UdYrB6a4dFJpbOD1cufOyh4M9y3LUEx3WELXGex\nPuJILTzAsw9R3rsV2gyw/sEPGe/VhkXbzWFHOus4v84sbXZfNp2f7DhtPNsT\n+izH9MQd4U4kZUbPFGt/beuBapnPgOpi/eD8sTMtRK6AUU9BlYjzNcZmHCeD\n+R7urlla5AAQ1WH/nxvCXfsIRpMRtY7aburHGox+Txp7P506nOQV2Fxl9+53\n7ePQughDfdpfGiBod/YPb4t6CEEhomm7TOw4MX4mfIPZtqvF/5lGahDuG05a\nSgQSBhmDrW6Rl50tJuWZ9iUYijzlZtYXlxNCDiLI8TfvLYZpS/SNj4n/c8yO\n8HRUaIfeEI2pWto4EnbSY2FMsytC5OxPXs0mOhVbZ6vQxkUbM7XN17uEfNkx\n5da0IwUfsn6zJyo0OflYZk7hbYl81cLBvNKLXgMw8x5FE+ZymqlLIu3bF2m5\nSmzKByPK+16uQoCC0FfG4zfpHYXniWweW6bBeSpv3uKRDH0yzTTy5ZV2IWb3\n6N22E2XNBy/1pzql0qKH3Dv1S5e4mI2cALLr4bFX1fwlBmxW9b2iIzJarRgY\nK/oG\r\n=RMRm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZAZMPKW9abPHOa8kUDINarWR/YV0lxm1gWPX2A2RU3AiAXrYhhFfGY5+Sc2LPjj2JkY93ztpeQhYeOQiBKx+ONwQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.94987b64.0_1595622364235_0.07519886051696245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.ac405eae1.0","@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/shape":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mATddFM7Yn6KBgO1WLPuEPuXjALfmX0GGuYepjW1HFrQ2Y+I8KFv6FMe7i5kSBsgj2d+5qU4CMApUB/gGsM9pQ==","shasum":"92d51fdb8870962273fb15463f660a46c7f095cd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":115400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyU0CRA9TVsSAnZWagAAQYoP/jPL+PcGxQJlr/h6jbwW\nabu3hlHj91wfTF1WZFYAXwd/4+UT0wagLqgsVZ/ClMshtX05R0PhWC8FS7fj\nqJ3ReXmGfSZK5aPWHCDVcmJNrgmEyqYj1QU74nVq2xT8SRiZl6uWuYD2v3tU\nd1+FsvJUQZFXgLm0/Tb4krugcasYmWIOlbTeUQCK+jUYjFqCJOvKG6sFc8YQ\nIUI/agcPpYEQftmuRGfvp75cXZA7mGYdItsxGgCeTW8onfFipiFGUoBoyYn1\nO4iOWk9RCtVCYlLrAVH/mzhqs2jrTpiICPYQ9iLaaYVKSQfhxpEQY69eWkjM\nJYqFV1wS8Lbc5C6dUp35uemkKUparOCY+LcNjVVGk4KbdKzOSsp+7vVOeBtb\nQYLMm9XLu9qfas7GGkkofVZIWOjzRiVn3reEG8IA/YjZ7bCnnJ4gTqA/jxRj\n4zr6lHBnhX6iv4RMndgqoprobIRlcCUr0MSLRSIeLAJPFvmwlL1abjTzHvAg\nQ9nvNpUFfL5bjJXb9lcVY/xGZDWjW2Lm1D8KyFGtl4RoBcXYc2O4jloMG1dp\n33VSGGdSkjUFrrCRr3DdYSC56XNgJ/uwjfqkOGFaX4HOwRa7ETzxAKT4VdxY\nO3EBtmHpiEKzps5DDOTE5peoNy+eInoTPts85mca9ZUo6VdEVl2RsM15CeFv\n0DE9\r\n=qqEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmUlM+wUKgPSXnsaYW/Ljgb6/+9KjRpA/PgX0zn+OwrwIgThK4S/5d1CDwEE0AKra+Abi6KtIt8lK7xqcfLLFIeAU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.ff49b7e2.0_1595876660287_0.9754605454931333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.3d334ccc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.ac405eae1.0","@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/shape":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-506TwyhaNFVNu8KpimNruf5yBpeD9jiAnfsUaLl2hRZphINNdjSg4poHfJSrdrF+VeNhp6IdVYQmQuHNGmHvbQ==","shasum":"44378e399defb837c6664968e3188674a857b8f9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE7sCRA9TVsSAnZWagAAMpwP/0b8Wm0hVCj6qya2hmVv\nBui5kWOZ5JRBvrLKpMEVYAkjt4UWqk22d+/tfplSwZE2IPofTkdWVEw5FTRe\np5uDx0zZ44hZ8BajDVO5P/SAjWDs5GSjCrOkHovjXWUndwLQCikri0yHpnCr\nvBv/DETDVZjF3b54fqm8GJ1/O1WeJdr7g1TsKCPautMONUNCYtdN7Tz50iwy\nGc9mLQxVDjPXWPjfnPCVfTwXvEgH6aVUhwQTgQoVSBUoYv7AAmfjZjNxn6qQ\nOAELWKfee4plZaq2e6E4potOjKRmJB3xC4qUxyURPKl9KGZ48eY+UsUxGmfY\nuiL3/8EBf5aaHa40HOLAZ9NHtGKucG6QvxCQT2unzrqjv1oVlGByxx8k0orD\ncarD5XioqEt8mEexK3mFR9kE6SbKprAceYFH1fnXyxD4guq03xWrfMwv4CpW\nhP3S8YGVmPZitxkWe75tMvGIIr6Ugo1CJmH0ly9ONgzbQWh7Qk/HQeQv9g3H\nlZ534ZaF0gA+yhzZDeaCLSE9QW4TqI9d2z1gN2DB7bsrghnV/FtCo6U+ALBJ\ngb3MrHlOj17MxTKqfjwnU33WKI5J9P8BcMrMmAfXpTl2y4cv7JDKpOv0eyzL\n6b2cHKz0cCBJlIKy3RsPwLXVL2EryAQQvhF9P99BuYGY+rDb7Fk3XheiQlgK\nG+Lr\r\n=UKlV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqzNfudtUFAiAE3blmjalw0d71gkmOE8tM3W7P4fdTmQIhAKdmhXkAd9pRDuDRiKv4iXHuvn6WP4K4Zhk6ocTNtxZe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.3d334ccc.0_1595952876321_0.04651245522936809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.82ac569e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-isCuQbhJqUZhIUbtf7OoKjwppQEkKK3X4mGnuh4UqMZolCpTLNdm1n1yO1oJhdqNFJ4srjZ0nncS8IZUo7iMNw==","shasum":"85dd1837b4fe04c2482d079b57dfdd9b244b622e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHF2CRA9TVsSAnZWagAA+rAP/R6EmiLoAmhd7KXZi/tm\npfkiUeJkNAa0hvsUDVy8CNCddiEpGBNKP5hnmYpXeRmZaRrVOayq5jODREvI\nae74J7oz5hF3dmapK7NzDlREeEEDqzuTf0Jlv6aSw5BDifqvoiwExx0je451\nIyExnlNorIuUFipLbmG2OFML/QGdLaE1zsm7RafgKUb5mIYIPFgv5s/fRZZD\n6Jcf0IRIDaN24KrJL7o9VyYHmGD9oJJ7mfKwFny1WuSpccHn/LQUz14QsQZ0\nTLD0sa0dLnlV2OoOn2HY3Ul4lcwgIpi43jNBwcWrm52GMxZM/YfOUqBMHTlP\n63KrwNo0dc3JVYStF3sQflZthNmel9cRAHeT+06dAyxjy8UtXuI7GSBx8EI4\ntrVMFMFYn2Fpo863IwCq2UoUaZUpRoK2ixD9jCb80mTDsJteghWPEtAXfuKk\nfv/DvY8GH5E8J0IJiAH+FaOd7VvlgGEtXqz9xy+6asN20JEUU1lj4dAbkJ+P\n37VQWHGLAl32o8q1bQewNzTWwB2AJP1Tr91zxwnta055AUWrSFO9N/L2Et1b\nO1nPhisTbkJyBx/OYcubxv+AwhC8Pok9Zs7UQQ8Jz2uzT8yt3o1yYR0isL5N\nJgwc4qm+Qep8WVfaRm1ki74s41gTdiuTwpKxJjkHaXyfrCFTDYF2aDPWhos4\nKt6G\r\n=lvsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/dWzCh/yZ202MJT/5jYW4iLdHH2ph5QccqLQYNMsXBwIgD1BA8fOuuw6Z4o7lTLs+nVdow5fnR3I20r3is1doTxg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.82ac569e.0_1595961717634_0.5502668639135215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.99df7397.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mwjEd5eitTzcE0vXzSxVwK78LhZAoN3EWHQ0ZfMf35xwoC684e0kFaN6oMxgYZ7YGlHzlvS+qwnF/OLjdIlmTA==","shasum":"650dfd730734a7f7b77cc7a68371bffafcbfec67","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOF/CRA9TVsSAnZWagAAyxkP/R1sDogEvwhKKX1t235N\nUfO7F4SRmq/lxClD1eY+WwAFM6hMdr2jvDbsKvFfUn8eJLZoOhJcQd3KjIaP\nxSu1ob1P2/T5h5mBJWxlF2m0pofsJL2sCRJTG2yD4EGVLh0DWPxUvMz2WavK\nzU+wTV/sVzzPRHqYwEFv+TTSExJdXdigZqF3N/Q3xDnZOLRdSYYqS7Lehcq+\nIw8bV4duwvcjHvNWCvGoGJLCm4XZtwZ6cYnVqZG6yUizB/Gp1N7DXhHzlIkx\nRecEIrNWMpWW/K/6mS1NQUcGk9SO7eTPMnQCkixSX/c9crhH5olFQWeHAekb\nCoqkebVHKZTEdky2LKwLyztydWd/dRticEgjeERs6Njhi4rVf3QUhwAeaRMg\nDFG+1275rA77DIJWR7cMp6BFsXE/++k3vJbCdALAa1n5v71oqUFMk+PfWruL\n4EVL0OKOUJ5jAE5KP9JCdNix9ZTDrTaNzlhP/DJSyKZF5K0miN2W0UIl4nwD\n9yz78FZrFNDqh8fdBhVRc/EoqH0lEv1yhDIH0nijOPrvPixXOC0+dutvVjnZ\nwZ1peDqmvVyN5v0Ow3yblqV2Nn/S5uAW0x8Au6EqRtJbl9SZZ2GucMPtobXx\nGMymav97y7Lv/W2dlD+Bolhp+aDXtVPTCMNfzCfa4nYf+gAl5PxbKJFYfTiq\nNnkI\r\n=G+K7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLk9FNoyVxRDVLSBhK5Pu79xyo4wmtzIuaeqzNQxIsdAiAjlN7hqrfewX8uounF4oT/9Bk4d82M7ftzcl7FlI5S0Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.99df7397.0_1595990399212_0.9295451739689455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.45493e05.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aEWbBs1ESah11thuHuhunbuDfCuswcbQ9t1I1XKZxc0EWttDU/56vbFebHJV4yjnlPr0Uwh5AiE6PRvmP4MBSw==","shasum":"70b79c8bc8bbe64968b66377d7afbc7c6ed46129","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7XCRA9TVsSAnZWagAAt44P/R7X1d1QBIdnLzsUHvRQ\nAsEbiSkmohJXtVUV9Ln+uNDJZzbSLcxpYz8jCPRnYvXdqAvb/3szTEySqzMg\nXIyizrVIwDPKo78qeUQ4XKdqB778OaTP8iW+lsACs/X8W4mT8dqSp299BPSK\nU4uhNmKqj27re6Ra7/PDG715V6iELsTanGlvTB6ZDABPOrenK7jQxNvnfEX7\nKEOpELH91VjRFsG+Ll7KT5WF00p7AaN08ZoUx00boaQ47PJLPeERTIXJMg/X\n9LKRurV9jS7zKRJgGb8/eaE6qKHFw1onoxJxRIP7Jt6n2gQbT0aWwgWIRzD/\n62iD02fzoN8SQLIXC33Jqpg6ssPNM6qZIXhurGoIEw+XGiykiXMY57Z+lqae\nXTigUCK3CVe948evb5AJeGmPqz+etPbmRbSFX0pnWZVStVksv4HUQ3Jt3tDS\n14h8ee7T6gbcJ0CS5NKkhAZ3kOknGaO8cgvGcTs3LDoyDFB5xdErSnHSdBX9\nDyOSkiMjz44YA6pPbusOLx6QqMxgmdzumDE60FN1U39iDsAT9Tqt7ARQHjva\nKw1UFDQgcirGPXzkXFi8VUQM/FAIY05VOL8KwJx4Un5vrRUQbp/KogS8msOS\n9HF8+j5pbNsZS3p4+UMJ6SlzVw533v+IO4q0YmM+rAMFuIPR7CjmqPbF9nrQ\neyYV\r\n=iFYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElIcS453k4Ky73BWOzSldeYCtLq6ts7j7TQXbIFTeGFAiEAvclXj5+Umj9dwLrl4fjFj24SrWhM45396khCqRT0r8c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.45493e05.0_1596042967036_0.3745227726395819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RiXMzR5HzngdmrrFSEquSnr/AAyoImukILoi09d0KMPAkBsRtuVpkHQ7VyfdwT+EccbDXzhnua0QRx99xznoww==","shasum":"733b514d2e3eaef7ad2dbaca3d5cd20b6f3f8a7e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa/0CRA9TVsSAnZWagAASRgQAJ543SfeURs67st73nWM\nj7xA804t8Au11ab+EMjwOD3bEkI5xxuUrDjqezphUx8JucMe3sRmIHfa9s8j\nw5KzKyROrXXZ/mLDb5slUG+CAhYzUx6i5suCrAJVd7WJVBXNWi40SYX9I5BG\nQFlH7sun0LpGFARbCX73MIrtxNAOCdsAlwgw8HKzKbVcUfxTwSMih+fxjB5B\nDeZjoerzjR7QlNkNEW5kwMp+CkRhH0BcLLFhhXXZWrSBOsvFEPV6tnKT/lof\n2GPXyZ/Edp9Ijgonebziill90N/9e9g+F6dY1789ZQqxtT7tB1FGwUQHfp9W\n6hMqkPARmo5lvatCeP/x7P8GXJfKrOu2RdvO9mfuuay3jpLzkF5Q8WVyjRBc\n+4kVDS9RmmN+MFkLckogYDU546GbRCiUuCmlQnh+JwSYPF8gZP51XcmQFL+w\ndZLLHpef/PvO1impqGRgK+j44916A2bXlGJEnd/ZigSsVCHT1MxdcxVCLjgH\nRxmdF/PwXwXh6pJ3vON4QSmh5psrLQ2DWmCshKWKLzGRbGEqRyQj+r8RyZ2R\ndcDpB08Ov0pw9Z6/25FroLZBu3JMgIvGU3RWB2pxi8XWehZR7TNOYlNNC7XG\n0cJfS6OBC1mPWa5dx07LWF6alNqkWmZfBYmz26shFtu9e+k4heeAcpHKxi7o\nOVTt\r\n=dVBc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOsdJUcmyeT2o6ajTkcIM2CZZZHEfvx+n9ag7BXF154AiEA5a6HJ2udF5ODE1EKiF/TMHESTDeWXLgEpvTB/eWQ2VQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.f2ab0a95.0_1596043251979_0.5889185664123415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.45f9eddc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hHcIH/iy4GO1cULuntWY5JdApLlanSbv07PrdEERQJdFY+anZTrc7CpKmcgFdilKmJRSLc6/C5HCDYbKq2Eu+Q==","shasum":"e92534dea13aef8c037dd25d240e6cb6b9a47ef5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpBCRA9TVsSAnZWagAAPEEP/ixK0l2dc8G7db873X3y\nmIzZhlTICvawIOsv6hsSj9cEfpLC8rPminRbwQ5RL8CUHZ1ZNgcMD3h3ovnv\nAHhNqE1OswlApaHBU2j6fAduDOtlzYASe5M5ChBwCBIFJhmqllbx7TQSnIGq\nH9uRE+MagJaqL6Rj2hUWzIZkg9Rn8eufPv8kXCmy+0+jbYCUF6dRpe8eXEil\neG+pfdRlxk7vaam8AHUlSHw+a/vTz5ZnyPMrm3ZKv8TIHUqPTDlDV+VBvLlM\nG4QdzZyHlOlbJUvDq0un45zWjCVlbsgdE/nuJz8z7Rud/3iSIlK/b+hL8UYk\nDzJnUaFWS+9Xqh8iju2CJfxLDcNldDqIoZ2xG4t/4wL1vR50ETcCHXckLq5B\nabcxyRZjFvgN/x2DeytvOCss497z1AR2fI3NliJgLtXP6HWKBoFNWoZC7Uwb\n31+CNq/Y1YQsdcIz9TRKtDjBXN8N1vAwdKOeUWL7vlIRSYlmDpBs8frfAz7C\n8QmW3HFDzRHrK76qvbTlbOB66dqIJB0gCrvyTV70qjr6YkIfztukyAe37wBt\nIbMpqpPwkdXVlR4wxRSPhfrC9E2FoidhnaxGRckjChhCh6G5ULjpokfYBpo+\nGgyiYoO/Njqb7PO6GSuDDRDNNxRvde9gtNLVgNgIkF1jcHbqVAxr2OaFOEDy\nEYJr\r\n=U+Vg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8/p91r98qFt9sDiUr95WR/BNtU/1kBigW9Ip+knJ1QAiEA7dEspsDmp9ZSvSTkCkb1ElZu91FZc3Dy4X4Pl7BgyAc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.45f9eddc.0_1596070464863_0.502589015052713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.b64663ea.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FvlkGqoaw4B02yvt3K9QTtS+0EoFEkBRqud+ioJ+u6S9sfnBUUb43uCsx4ESsmugcvWkQ6W1QiuyWmQE/o3QaA==","shasum":"b155ec9c27e624d430a237c48c7f632c2b4bc89e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaSCRA9TVsSAnZWagAA41MP/2j46wYR1LmBlPpFn5T3\neYNAc35Buv5h3Ha/jYSLJIrUDO83Xbx1XBWjUhHaQeMOcVak/P0GKR1hhIbe\nzZjsw5BlODeI1ZyMmpTY0JjA3wed8XlW9Jlc09oZZkJeMjhFJgmpjVzxB+Gb\n6nYLs+2Z9uIiGEjmnz/hV6D7knlsDDXxK74usxSh9vTLezYKIaW/w97srq3P\ndlqmFL46o+pO2ydqVFPRPIs8hsGLw+1GN+6VfptFbIjHBuRsgf1A/9Go56wh\nM08QwHaZXhk1YYsM6DuXL0QlyNWym9202cgNQkksKu+6SMb1/Y0k4wjNGkV8\nIROWGfZO+kNfb6SbFAL0vHZpUa8mJ73hdXJXKqpJ9aoalakDL574GUljPNOa\nuoFhTe0u1qY77XKrRf9IbyfsaUfKTMkaZKI9Bqt353kZwtVXE+pPbfWnD9O9\nLMB/KklCx9YZw7agI9xrh40ComIULCblqwLjz2WmwU6w82+MT3ITNVeNl+6+\nTYOkAxhfgqF3y/Z5q72Zzd4xzN7n25mmPBuWPkpZ7TkJ86y4rpfx7dumo1uE\nL1ls+I25IBR98I2WHOz+4Lqr5Lm8x8NM4B0sG1RMWQwsqC7aNfAi6Ix/g7yK\nYXDiacuhpKbxmLV6XBHGTFfaHs2mn4BCgm79y0ES+KMu2uwapq8X/45yK9a9\nxxzN\r\n=upf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOTiJ7ecCNsECLcL6g/VhDRv6vvJlNxkVs/EVNlz0LdAIhALQHywVeAlEian+1OLnLdzN+F/SJRHB+WKKW7jNocXWz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.b64663ea.0_1596130961714_0.4450035829292891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.f86f83f54.0","@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xCTLjW7iF7SZwjzOc+tRmQ0ae+Kwp9HbwyeWqGvsAK0NmykTOSQbwE6sp7VcwN38GL1lXIPurXcYUR50Ww/3Sg==","shasum":"bd8652d0392be735421a3fecadcd47422dc42f83","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzWvCRA9TVsSAnZWagAAsvAQAJvt/PbWtAGlOtfPI2/i\nEsK1F07fNQB/qWQaZ3BoxB+XT0E07XdoMzN/X0IJAhFrGdevFBKDuH0oWrbK\nzKVS1Klhh6C+kO+3Y06o5ri1cgeRV6p4sy7Gm458PBgRjjU5B4vhe8U/1eeL\nOyvKJiYqjdaCLO2CG0wCuJTkBDY92q/ea2od+ahVEH//uCf9GO4yWnqhyEBV\nnrnlqHCC07hLQ3076UIKblW66kxzp8myLhQo32xrCRb7lWT3w+4jCJ2/lNZu\nM9OUK0pmkkMUOHnCGPdsjWnY7j0gSGBuv8Ag9uTbmCVjAyfVsW1ppIiWIR0u\n8eaff/TO8TjesaJ7OH6bBM/A+0h6+g7UX5WcHwbt0CZ3IuulC2SWPCNzmEJZ\nTu/qiI94NmqK4TfkN/1A6IzwZXMxjbZeSHdW4Y4QPCiHLo05o5Cu2DHAol9s\nZzGRnVy9uoqAhlswRHSm6hAnFhE4dEjM54InhanVX1bxEFK1vkWfUhetrg09\nYx5F1d9ODqpwvlT+E1gAnTfVIpdXHyxwwPoxx+3EoQ6LoAnc0E1pXlGXC2h7\nfHuSKkMHVIAPvHBZaM8EZKJYyY5WM6MsBDjOt+q6UUQe5CWKdtg4DtyWUsys\n/vP7fBOddoE4wvMpnbAUWNeEVhGMcyCAfLI+8G3zOgstUvc0nFUa0EHd3JUX\njq1+\r\n=/a7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCSqD1XZejzmzBFTIORKEpNGtLw4gzYhLulFMM5mLFXgIhANNzWtCN+TZUQo9kviUM/0Pvmpuokz1TTVXmjADkvGnm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.9a1a4d2d.0_1596143022815_0.11526193070030422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.887c2848.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lcBfqjCV/NXEP1rzEav4+L09yhcTB8Rp2dnPwgz6yLD9oIZBPj0wE9S0FKHm4ZGUaHbvzLB7+x+evs/Y5dVJGg==","shasum":"2aeabf578c758d4c68ad39649a8bca6dec426822","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QUCRA9TVsSAnZWagAAGMUP/3vwl63GM0o5iKOVkQbr\nR7+keNl634mNSwv6ynOcUlL13W1WDJdMUs5uyCZlEwsgtCc5Vt7CohA5WJx1\nITYRRcN+s0JSZ/DgmGsAC3bwTbbB0jp/mdxK6xy7aKZIaFONK9QeXTe5Ovou\nElYdI0kH7MCzvy6OgcdASmL49KVe7moSIyLv1sBmmA5flKZmcDeG9uXtwidY\nHUMQm7b3/Vs17pGaBimEmKguUphWufxA6VMggArpXaEhd7JHjp9xV6Tz6Jn1\nf6AKLJu4BIsykkDUauKVRFgxEe9haII2f7ojWH0w5JVTz3ZuGu45FHfdVYps\n0Jbor37Q6TfUKQoYpkhV+JGMHM9+AKlu1/RDl3KJUADFgnYEK0RS+fOuAkbK\n8wGPVCdvwcmxBsACYYL3dbV4+sd03NuVB3VlRyk1jILDQRmLf9T5Yd8IlGeQ\nX036Kprx2JW5SsMxvj2BEW0+o9fgdygyxHDOJuS9fo++r6gqQqOIfFwtmeGd\nXljtBIEKqDDOTTSpVsVSfO/QHHZVSPpuxoBa4cT8v1KLXF2fl/DrgKNQDGOI\nKT0/ZVmsMFJCnHyxvxmwvxDTmUddianmEobzqqkGrm9C3lNIpGT+FZDzuKzS\nXRnRmDKSEimgBqaUbsqP6Yyz/jUNjmhXm5ODDAK8ErBK2iYS36zl9XTZZpvR\nxdXp\r\n=sIsB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICweUIq5oAAoGMUF1LHY77WORdCDLPMEsNRyrZYYA7PvAiEAimwZ62B5miuhDWbR10HrczJl45zk7NXqfPCIJlPvTog="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.887c2848.0_1596146707812_0.2154613879088283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.354eb695.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vNT7EOHn5Ya/71b36glfK508O3dTJ92TAeKtxWR10IHKcZ6tu3oe2eG5zo0ladh0ksz6di3iFbq7iyT1oJm3Hg==","shasum":"75e1371006318a489f511ebfee4002c33e2146b5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15kCRA9TVsSAnZWagAAmnwP/1kfIr1/c4Drhw5o8ptt\nZdpYAzfdzsyOMR5cgSxYOcP2dBWjQykc+LLKN6BKL4uCnL6Xx7tVm3PJHQ4o\nT6Z2WP/PJtWzoi/btWn6B6O/9kayxIcdIq7Zw9hhDQJkp+l3vShpLarPam25\nJRmAQueX3SyJNn3aHN2ysuv2o+KwrkRkYYBV6jbaGua6WdfZp/EOX3m+Z0Ow\nvxaTl35UCrSLVaNhTSaumukYZaoijfjen/iyDLl2ynHevfXga7g8TDpaWvvx\n6HN9Gn/F0XjTa8gZYk1BiuWONULWitZTvMnxoAxjq2LFvZ2gVJoy1dNkx+sg\nt0K8X/fDxTkwZ/pV+MIUJMSdRZX/AVOJDUGNl4KsHbW6ksyB/Kve6ezLlsbc\nMZyfUZNBoQshvsf+TFIVMinoYzi5IhDvbUJZGKDaGAo/uoRiak92A15N6r2R\nZK7Ox0DZj1tFHvOLUBvR83bdz1941c2F21+30/8kH4+LN3ESoMrx1V5gw0IL\nesPcPQBmhSIZ+eDM6wC0O1Bwv2NxwNAqiVIESlsac9KiDJikuoz80GosSoE3\nnTIRYNqi7BLMEiibcRVvnOOSBuDJVxVXg9JWBFVlZxp4A0Jkf3WqwlFOo0MW\nO/ZnRJH+/8fqGR+aH2s9qbSXcN3p6sYjYhhKXhKmQKCVgh4YR8Mn3UYB+SHD\n6k8i\r\n=0qGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvEWJCbmZwzllNES47a3E4gzWUjpINLb+w8BC2XceB0gIgNMciXzMq5I/P8UilSkRt2R7JUEvupl8tftuQwFwFxiY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.354eb695.0_1596153444363_0.9667258234366329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.7beb236c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0OIcfIJrNKYaPpSSHABYAGF5a/nM2SbkpFNxOKHDZbGH6HsrElohaK8oGLOoPaNoJzFioG0oXgizc+egHYvXhg==","shasum":"4871d3a0f0fb9173e694fee6c7a3f0bd76d16b83","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFdyCRA9TVsSAnZWagAAW/4QAJ3JWM1Sszw36JntyMdU\nFLa1rWJg9IvxZ3YAzZlhCItYxRC+5u3hpOOcXfYn6dyEPueoXiTo6PGInoTp\nDG19ELAYzQ2MdVLNZ7pMl0HgiUY3ztDCnM4mAujBYRZUHs4JrEwl+MtOModZ\nEIcqHEW53CSVXZurTxalF4FGme1N2GJJaCfrekAIj5ZVdZCR2hQF7PLKYyYK\noqfjVxaDpLPs1TVa74kp8SOXOU2dZHUVUR6BPDuSdMcl3TQK6jOYBfaeW89u\n0T2rto35ARTeHUfTV0MF5fIM/b1qYL+/pj4/Oj2tI0Y7+kg65idzBCV2EdBG\nx2h97JLB68zq6ZMJTQiHqQV0oEfxOrBV+FLV4z5u+IE6wa7jUQ/ZPfTZY4IM\n37TmznezHBh8FIL4LvOUXABwP/5Z3/JQmk5mMW3Xpge8gOFTKl/OvGXn7cJT\nAKjYZCoKOLJSiooxVI4qffKWfWVF927RKvpUuyVLLQwY0Hj3p+If7mvteVOp\nOPwXJujPrCwdqwzqdcJK49h5Z2VGRtiaCgw8Zf66UpGG2K2NlhBuxrvJ/Wk5\nFRG8k1qDZGT4iK/5vMYrHxAV5vITgKCS0mWIatNHHywEg77Uod+0Tc0gPZJh\n019mTaOcdNkvT8bgMaulfGmWCDZatBcYKLj54fAiWa2Z+LtQM2t6OEeLHxgn\nf9rM\r\n=PeI+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLdfDXzbuIILVSZXlUoa3o0NnVwrkwe9B3JDMgNjEvOQIhAJoKSnWxKFVxHI9PIdykyVwGp/5EkWyMh4GloEF08oNc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.7beb236c.0_1596217201896_0.3257628712237828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.c44acc0c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PnwQaWy4a/qnoVPyVC9pmhVuteeKwSTfqBitfWeVClLNbuWVNn/qj2xUQfqmO70dL/fhgKDu5Jp5dCUZJwsFag==","shasum":"1a11d34c98c9b84c710c3fd675dbef95f303e7fb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":116567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjLCRA9TVsSAnZWagAARWsP/jWngJGxsvtHgfPY+yHO\ntWhtfupMsRqEVmLl/BBLGFTmp9Z5b4qZ5OOstXYPTYqBtPRu19URpZx5x6Vt\nj5BpxsBziNZCLipX/AGlLTTDlHXdilaezsjzz1WAfEAloG9dCUyJRsLWnbl8\npd2f7/TOfruWKL9DpLdvDXjVgGQuLyd2F1hiFtptSSPfCE72o4tAdidTIdPz\n+ana4ZmN8UAwDApwracSlW6CUkerrLN6ny0cemSv44vr3fRhc7F4/pU3H6jM\nD+Y1Ef739hlvkWyYtMDKCuDy2K8BR3j1BBusByRZupoe66ef87qy9JP1mgex\nsQ5Act3x4cBjZ7j+Smy0LtcZXbvucRUIlboKBBel3dYLs4xNdiC0awelLpPM\nlHbB6Gw3JZFlvMjQGkXuhq0dIrs9ow3VbaE+yryA8k/2BwJE0g6Jj++OGH/r\nkf22GrSItpTFnrUiGRUYZ1fE5P3oBg18rPeQ/zgmcMmnXfosKcr6VrsiWmWv\nQSEbg1T1K6SfYuOtVqwf7QCPDgBS7JMpL2af2sdnKnxZTWvpqDV7i2HQ4c0k\nIMPRAHhKmZS4u0+TdZbaKzqdh72karwMerlrppYi4QZTWF3fBbry1Ku47NH/\n0dvbSwSZ/PgfexPXuBAnqc/bppQgKBhsUVlCimfO3jQAK7Zk48fKBck3dJOQ\nbT2z\r\n=xQYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVMEbyW+j3RwzZ7QnSXQmGj6k/ycJ9800U/etURcy40QIhAO9cLJ+IMn3Oxs5mrUITVxbU1JsbAdGz4t6sikzxGx+t"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.c44acc0c.0_1596229834775_0.28248659009370347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.779853ff.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-button":"0.18.0-canary.779853ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bOPgGMonTiJlbrtzrwdb1fSw2SZNG1xQ3fB0YP3stTDMN+CtJTNLecT1Vf3luSRcMgECwvlo1FPfYmF6SDqRMg==","shasum":"f8a643222fcbdce912db9bf9d8d2e69cbb61b6c1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgoCRA9TVsSAnZWagAAP0oP/2gAS+/s2PwCVN2y5sH6\nUtqiKX1SjHgUEeKL8cZ8Gs7QWa0oppLPpbYkDjSoI15jhdNzacTZsvN90ygS\nRwvzvKVjPUc7H1nioLiVNloda0emML+/zOLVHLFMiJxTXCzTOXmIfIzv0SnN\nkNIJBFOsePh1L/FnfH+vt1k9L2rrMV6FdwYFWF1Bul1MXhsOrN2HwBKkrbt4\nnLseVWJlbyfR5MT5eqXQ6MAEGg9R4vtkeJ4edbZVnVg9f1R/8zVfv6WpuKGi\nhPXhwZwXBhUpxl3BPT7d1lbLpWqsyp1rx0bWf8UkZbGGPx+Qw8CF6XxT2Y+n\nGFDh1Rqdmp7ktY3Resu1IFIaf4GEej3VgGHeKq+PmeoxT5qaK6uGhd61KzqM\np/wC3movENi27mi9wqkCUBuf6C884ZZpTM8rfeTb7eUohkZKoX2+320GKMm3\n06tQN87BkzUqLg9zOS5OJRdztl55WSJeJQjzY+POSPA929/B9C9o9ckLrxDG\nkNN9vmH9n+Tq2MUbffNcM1ldANiXkPaIxJ6S6XLjKWKb2ZIJY7poVQzkkKGf\n1zhPY/g8q4kmX23sbT6vfo3OrTIgZx0iODtWXGiLLzYEEbsNsynLWIVe1CKe\nDxsku2WA3vKtJTDKLavqVNJ2VUmgK+ky/1VPSHXFgPm1OidGtM6g9imueVZv\nxdPr\r\n=6CrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn1XaDbqwkLtLq6UXEl8KCdR50kX5wgbyEn/E50dy2HAiA8yMm5Qyx8bFt1+87pflExjKLuppAre78WhJlDc6eRSQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.779853ff.0_1596475431660_0.5117619831918112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.8aaf270b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.74839da7b.0","@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-button":"0.18.0-canary.8aaf270b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oHvDfeSC0hTHnhHdd+Z8oys522xdj/wmfLoyLpIaV0EUCyrjDHbLJaCxuLjtE/FSrS3VWrajKuwyGTUDyrVi5g==","shasum":"6ab69b7fb8f652985ca52e8dad3d97f1b235c8a5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFpACRA9TVsSAnZWagAApYcP/1Wf+LCBDvU6Cp4r+Z3f\n2L6HOEBt2S+rWuTm++AdrqTyn5sksuEoF7kE3meGl2KP3Rf9JN5+WlV+Cj7z\n2v1ysr6pOfjIxhs5yFloNoN9IDvKMLdCJm33hrZHqs5vJ0zk6g/ndZS2nRs2\ntGQKtuKRkj8e+tk0Cn9au1UCni1SzDQAMnwEQ+QewcJkG+Gb/xg6KcbjQ/yu\nk1CgqS6cvhVqA8BXE1LLTyKsJFDcFAtiffJ9LVk0C2Nh1DtvyUm3rjeDbevN\nL6qdAolk0qX62i0p39bA4keBNe2au+yFfL0D0mBuJVpNP7vGKgwEyJAN7d1A\nfINMSI5Y9lFT2ChQJKdi/MszOo2/CMcoohoGCR/hNdqPhnCBBZv4NJ1NS4ld\njdm+Y1CgbUEc4zS8pYhWNzVKQt0nMDCdiySSuQJVFPKVuio/lZmQ3kzZ7/tz\naUYwG0GZ/D+SWRMoJfI9emXpOBwHaHsdKNtpHZxE+9cI3UtO2Sj6ufAsD9yC\nfVxKAzL+FbWcVpt51g/mivei/9KAnSPb3o9HxEQV8gKTK1hu4vEuOzCZsz30\n0Z/3gvHer0bQC47V8k+seS1LNssYAJQ7fH31/axHmePqzjl6CqDcQH6/nnvz\nXjgqTIStE2d4f8TboP2tODt3sVbpTNIFYezJ5dFyTC3AwdtHyEJz3V14gHw5\nHF+i\r\n=2nJs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtepPqiIwmXBM2NNApSMcp3z1f0S073ifr/iC7paDRwAiB4ZXBl5NPNcPKQj8CEcxYZjsOy9xjj8s6TIo4wSQlBDA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.8aaf270b.0_1596480063713_0.12226864186931952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.5cde9f12.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.5903d39af.0","@material/dom":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-button":"0.18.0-canary.5cde9f12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.5903d39af.0","@material/feature-targeting":"=8.0.0-canary.5903d39af.0","@material/rtl":"=8.0.0-canary.5903d39af.0","@material/shape":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Z99PPHBsFj+U4JeP/jofv0ZQerAgbFxOmaKHhLOjotYzZyp1Wj9OJbVBrGixYgvz76O1RbC5jQOUayOFQmx+WA==","shasum":"d2eb455a5fac92cecb410833e89538d6c44ad5d1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8LCRA9TVsSAnZWagAAD50P+QGdIz80ClgIdjQZ+oHI\nWUPF+fhK4YB4E+HLJxOtPXJTBd83DZdjVPQr5pmSeVI8PKS5+hEfsXO0x1xo\nhN9kar30u06o6C+iaZDWwJhgd/8tYDKC06mDX/rgmJWUzTz6tgF7rYW6GJfE\nFm7XqNDH36SBtjEcGsOcYvsd299xXtEgpKe4iKxV8CuHdhp5DcGZBR3QtYE9\nKct///hD8gGmbkqc5x0jDFvbwaA/ff4d7nhprT3Cgyz2HRKAjg3C3SF/kU4A\n80pZaWdFIRRIfDZ/BIK6oMevf5OVemyTry7+IzCgG9h2hV3lx+twTSvGfGwF\nwzydoUMOOjwCS0oCJ5IwkTW7JG8NDZYP6aBg7mgbu0GxTB7UUCV+KnkULCAU\nmd6/c9a/8cI9sxpg9vD1H2hMQ1UqSWUo+Kb8QCgHZR+GNE90FWnpfXmOSX3E\njX1zEuIQj996FcwfzfrrhpyX1YY//9pSwXIV8xxZLNLXmodvfWKHdRsUkpKI\naVXvpTPrN62OL8TMQY7tDimgP+sFRgC50rOu+Rc5OhPtsB2SgQw6PSGHaT6x\nEHIaSqBpaVlJ08XsIDi/k21vSibaM/B9fY9dQtrBBWG2yEGqGc+kp2MaqgiV\ngGcwl8yegGcEvTiYPGqc8PvgFXcMVFi7q4WbStCFsGzSoSvRdKAe1mCM9k7x\nfHo1\r\n=zA5Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOihXJJAluUxaWon5HBGXhmoqqIfxZRktyQsGaNKn/ZAiEA2qBwM0YY1eqXmnzW1vyzkuB0wKPn214uPHIxz37qf7A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.5cde9f12.0_1596481290761_0.14764279430691452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.1607ec53.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-button":"0.18.0-canary.1607ec53.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-btVp4FEXEIT3YOXyrQcIqZEI5Aa4Li+jf0aOyvX1ykLEdp4YMowRQAaivt+1Wpxh/S0HO4sIqXYaNlVIEPPdIQ==","shasum":"17348521abf6a80345e46bd4cb3b6356c182d0c8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGm8CRA9TVsSAnZWagAApIYP/RzOkDsIbE/hSA1xIu/l\n33ajIlfQg5+AK2cqvGwLFX3GF/LXNmJs5RyKnp95FWZx7wUqWhkhbb2vCvRL\n9mINdDnNqSVLr8LCLxcDftPXrtK5eIEL9AEqXYJPX5YSOAT5BPQETSHz2dTS\nWg02YIXikOdWtmA8lSKAgQp5qCCjzg19k+RGb2eSWJfcX/6+1LeTG+3bRkdM\n0NYjxv3ltj6GK29Tlc9RKD7v4KV34TFoZkU8aMkOck7M5Dp9hu+cxrtY0RAv\nyR02Dc4P8gwVY5ct0uUkgAGdTSi1vkCH+q439Xb27AoCydmJO+LvS1ydNFAK\nmmXmLA2uZuIz4SyunFw3WZUHzxS5padqrgfahxULU+EVQBTiCKWENxK3NAQF\nb3laLlAuszVLHFIFA8TZ9vvBBpNr+jTYy7vP/Ph4CefyrfBtpqAmInC8SWP6\n4WfdneU3j2quaD+1huh7yD3NgwsnTGBHkae2aGtERsRav3NIr3V2/9Heu33Q\nLkfaI948LgAJNFlVpWDsQYxX5o777e/tPPpuVPtN3n7aGlZ0K/EqgBHwxOPX\n9UAE+wW90lxB4KoyMBoPOgsrFLZb3oXa/teL5sBySxy8iEQB5qLJu8QuremO\niZ70JT2VRmoTwplasAgzMDsxxyiEt9GKLN+s9pkHYNsC8+4fJbiP7tk9zg5q\nnaQw\r\n=1iZb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9HdA9p5Cx52PzSLFDGZJEuPfW1FAxGP92ylZIyWPA1AiEA9W/DzNJJEV14N9EmirRKO7qShZMEnw9ONy05cTZ+4HU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.1607ec53.0_1596484028207_0.47574176864148865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.678b30e3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-button":"0.18.0-canary.678b30e3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Mj3Zu2/pXH9kSuLKob/pY56a3+NrlRJWCFGW+g/XkyZwh0TvBESOEMtW4C35M9uhE+A7R8lqnrKlwvKKMgKfpA==","shasum":"e0322833c31b40bbeee29a4f6096f71fd753fa13","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqiCRA9TVsSAnZWagAAFZ4P/iozMeHz7fzMdFq6/HgK\nVreeuxHWtu1B4I7YWtgCUkkHeWfUftEAT0PWY9ryRoRI1/kLxEaHKtAHzsXM\nCO2XVXHEP8c0ZYWN3obVOskUM7p6MWcgHYb9B1afBv9oFZVMgmCvqq3CZiQg\nXlGsPCJnHNutHXuidN0bJEkEWv1AOXTX3jgV3Av1xtvhXedWxi/t/4KH72k2\n9DOKNPAdg7I6Xw4LYMR14P0d3GF4DR1rSoJpcrn/aTaZ4AOz3v4nFGXVTiuG\nQRYtGlWEDPARqgtClJdvbIKZNVuMNS1+Aaz2A5aJvmUVVyS7hSncoxBqRAH0\npIvGBNPhUIcXdDEsSTsWpIOgDiz2Uob07jrxtj6MI4NJAOhSu6BbhvSdKRO8\nlx3CSmWdo4c+fZfjMfkTwg63i73VLn9J2N/GrDjryvwaao/Nfnk1Ya8AqSkg\n3MxLA+RJV4wmWl4YfJugxPfOienoL/GUsgJNDHN0IlpJal5BhT87F0Y1PWoF\nzHsQzfWOUQpBSyUa1OQf/QDXIT9ke6dcj5/DYMqLy0ZLQh3zS3yo0JtsGVVk\njGIUE7CclTNq1DX4cRRkyB8JHqk1rOjYCnL7fzKOa3aEQGEn8xgBkMVshI79\nzloGscf4DtgFVNS5m5UzrTjplZ9djjoQGGRu7ga6Y/Z0bpAha9BJL3prumt1\nwIVf\r\n=K1a7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBF4v0+xXuvuxf/6wwSgxDHCvuosYXzLEdPu7jvXMRguAiEA8dam+DiNA5jgfF0VDM1/EYqTtdLofwd1kcEf36qUVDQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.678b30e3.0_1596484258291_0.5578043565463184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-dialog","version":"0.18.0-canary.21c55569.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-button":"0.18.0-canary.21c55569.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LYkexp/aM9Vla3msJaxKfVIQbhbvrTm2Yd9T9uTfLUhVOY0nUuwA8OvMMscVGzICW8VauFB9ABBWdJW4ctWsiQ==","shasum":"3dad3d81f168f1cc15fbf2f6f481b072b11a9091","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwNCRA9TVsSAnZWagAAbbkP/1OOzDK2+Pyw1LgrLQrU\nLZq3aXVQDhP+6SOpnbPtKh+Vz+EEGeObMDCX4UK3+IE/Jbo6ZWtKDedKBMmt\nZEuhpuD/pj8a1tdhtNtJa8cB+4Ywd9L9KgAh3OVo8QGmF3ZI6Ye8PfOsT2bI\nc7z9KKuKoDI2wMVgEyhKNSYaNhkNL6oFvqbUaDP8eHpeW7xZpdVjR37QulTo\n721FyPLPW2fcqGzin1Iv6pZsKiPXw2i2uMy1bRkF5si3sL0NO+jngULIIDI5\ndVcSDNOPhx3Ue+Acmxl8Y20U8WAd35R7kGIQyajge0marHbPalh5KcQ4qReI\nB7/i+Y2HYEP3qj39UI7gLTU9LBxFtpcTETg9r9/qORmktHP10D5b9qUCJKtA\nHPJx6msHuw+tW6R0WKTZitsY9+KmbSumLfg/Hh5X+HpoTT77Pmt9yawVltDC\nwBB4c63wFRL9+Wijz1KKysLV0isJ4tsd224JzPrXJeyvGqclmM5mZOsvrTyp\njEPbl1sKYcSB3nYBHNJ51gY9LKt5qOsSj5TTLPmrYl2fSLjdKm1LueUHlF3T\njGk+7ZVb1NXHB9y/PR782mfrMvV0tptjvXlmBYaYfQGVZ3WgZm3BdDS4/P05\nigsDomZ6kcb4V5M42/vhWRtVERqpR/GXwuqyOf6HWBkj16AUGPETDlnhii4j\nIWPu\r\n=c3pO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC21H505A7PrHGeNWsU1sAPfomfNXEQLYUCKShiaYWj8AIhAMvx/i9appILDMlTpN4BdvvKll2kqSiycRgZLJeeGSEd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0-canary.21c55569.0_1596484621485_0.3942964681719081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.907d4d7d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-button":"0.19.0-canary.907d4d7d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B+qVBbclTawMtqUQwV6JrUVaymnON7xv3RBsP4YT2W0iTVpCH0xUpvvgu0zQgEHzsaIBMct8pXSy5q164F1piA==","shasum":"e151db3fa663c6b67937edb4efd549e100bc11ba","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAlCRA9TVsSAnZWagAAxIYP/0ZRnOz3gN/8O63gA/Cp\nPJet73smEqhWzdy91eJIj1SjKlbYLXAwX5HrdT2+5zgR9YJkyu2M4YizRpkR\nkaEopL/tqpEYZsXkgt2hyipoVq16ICZT346R2ng2foPt4zOlgLshLZyzq+9w\n9yh65N+qHogi1btF+tlOr+kmCfkNnVuFFT3SMNIE/F/yka9pDhyORvj7v4D9\nbpCthZ1Tu+chFQAHlKujM4uPOPZ2j49Wv8uegy4jrrf7iIXGUy2tGJa8gtgg\nEFVhXxTIFTaZheu3NzVJMz4wU7SjWmMK1A8ywRhAulbtG4OoDhYv2tFQT3WT\nZqwGXWa0yus1gM9/0lScr1qTTMGx7RKV/sm2zllbjPgUxZkiAvKkBlb1m8Sx\nvLzhtHSsLkUIPLYaRS7XK6oALrmPz+yIEdm6Z7R/zPjynpZMuqy5csvO0KpW\nrCA6ZBFWbyR9tN1L01kZYHcoL4Rzzv3jjgpkWzEIJhx/ZutV/IVDB7yRP86r\nrRELM1Cjjy/k7Kzkf5+/pH4i1SZ7pQJwwxE/vE07xSUzQb6pjmgy4b6jWodM\n4MIykcUfgFPkNsGMFlzUE4OTzVipW3dhVaxgj7IxemkrWwdFWdLTt3jDCyEd\ntFRXhhtUWf3aP2u47jB9p7Tm5w1hFmlVPNwRkPJ65eOdyNDcDNn7/gqqjOEQ\neP/t\r\n=pVjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD15dxKQLy8SYquQzn4vW/F8RHKkCWbZ5D0GwdpApCtoAIgMnd3TqWSvqw6zoN82KP64Ffbf9P40RLNbt6e7VRJqQU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.907d4d7d.0_1596489765445_0.7075204498498591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-dialog","version":"0.18.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-button":"^0.18.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-6vKhwVwUpT/thMInH2IrsI5qAWAdu42dMRLF1FoA0tlzcwE5D8xHTFpDev+ApHJGSFYRSl/AQ6qTsGQfuO8llw==","shasum":"87b06321798d67ceeecfae27ea3f24fdf0c64e81","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.18.0.tgz","fileCount":16,"unpackedSize":116571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICVCRA9TVsSAnZWagAA2EwP/iWGP20hvGEJjcy//NMO\nvi/Z6voQmfY75rCcVtalun+lHM4W5LSuOWiKDAkv8oc8qLchCC4XkiWwzbyy\nxd/8OJYT025BsOUa+DxA/z44tUZje+iRg18W1/ZvLlVwnCcCKDfO3oatFvE0\nCIHMxsG8dlPUXSaJZqCyrXGAHXNlSVlWCtBExgKMaiAP/iGngS0Cq9i8m11Y\noeXsBpyGYveGTURR6Ka1xfN+ZLO/TLv4YcBM5UIooQK+Tg+c4VmQQ9lyTf1/\nRbJu8jLnySeiuGHM5nelhlCArbCCHmlo4K3zvXKtyu7R4l0QuGgbezANx4cw\nzLRMNJSW36uihC7+sq1FUACDmRvi1CTUj8xplYJtYIyyFdMU1iLmmWKo3O0T\nkJYTjsVEjHf8rqBBteRBq8H6f5fJKBEP6kkOHZcM4YWSZlTO9KkgR57BJY7n\nnPM1EmRUd7q/hLXfrNoJPzxuOYN7wmimzVnc4925xYQ9lNJDmIftwAIm9A4l\nyTKfFpUk/QICyxYZTPFlOta3WA7wBh1CvjuOpw1fP4fJMS/vOHcvRZQAB22T\nDSynjXH5tldTiOlNxxJQ9EW+W1Yn+4J1Q8AHsq1g4/J+eag1+AKYJ5w5uiWj\nr+S3g+/Ra74eDDJZsWAmFCczEcvNTi3iNGh0HsOX3c/8ozEWRO+6SBYlv9wL\nIQZ8\r\n=6Ol5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKnCjoccTWv20zPQH3jloveL8cYOkuSwY80V3rXbo3tAiEAqc//h7uQ8V+YrFubDTwHd/jgr5eh8ihT2bpDln1uuTw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.18.0_1596489877076_0.09166714040576762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.f7958e4a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.096a7a066.0","@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-button":"0.19.0-canary.f7958e4a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QygjH3jI8qfC2dYjtMG+v4aU/CMUWAzT0Q3r/mxE5ayI3Pfjwa4O115VTI28H8Nak3YipvMGDjP0Tis5HXhnNQ==","shasum":"d32a96d3c2eb19166f6129f81c1321fc1f77edc7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLTCRA9TVsSAnZWagAAtc0QAKUA5rig6fQiTzpwuCRu\n8ziaL8ZtrMn1ymcDOxdw9wUNCcY7wWREgEofts+ro8/bQxNl/+HeF4oOKKAs\nEOgOHpzUakRAs+xYYBM5g2mzQkOypOKfVWQRcUpGoB15W67drVovVcKR4PyI\nGaS7x5zSykfSVjrhr2SePqVy0NfJUJLNJHWhJPwzDn5DrgE68rT/RIhgiqce\nGReteK0gwGFC2EkPK/0zqWLmlFCEaC+2kLTue2LYUsgK6bu3n0EbN5HbejBB\n+ujza5WbcqoeQDtiM/DiDEjrPPKGugCUSnCKcbLIm79a4jB5dMfUoEFH6SrB\nE7rErGjUcs1XMu+7uCn1b9w8Grn4g1lU/nbRPFEaai6R4wp+ov4SuPmxUhn1\n/S0+KdirmJN0kgmI0rlPzjmB/d1PN7NNmClkq2CVU3GnUpiJiExo17q1teUq\nYnoLScwi7+skENSCSZjZd8/omdgpRsh8yvSDQtkr7grD+SWmC+dMqKrFjxwD\nILvxvvpXeJ8ytuxO5NGr3HJDDZSYcpo4Z7o7tK0mMhK6dLPAsqdE2UOiE+ag\n+0mL9tJipKu1PRqEyKK/VBvHx9qA7YbfDmBRkV6zfuK1fatMQ36X4bTn/IDH\nRA0fyoYM0nvPskc9ehoZrKvgkuYu2I8jyGVTO9F8UTSk5g4idxtg5FM5OfT2\njio+\r\n=15lG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtD+uF2iGrZB92Vo92+MkbMh1kw65wlv9S1SXkhqqncgIgfSL0cbpY6itFybbCC4lcTFML1ASxogdnCfiKNo8jYYY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.f7958e4a.0_1596506834991_0.5711882776099833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-button":"0.19.0-canary.f8ceaf79.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-h8DRECtQHLqVduP/Z2LjGsm6saNK3WpAwGk/NHjtPkKv6LS62kE1KGce/6D+G27pvq9gpaDK5NtjHOoeoxh2WA==","shasum":"59310f2e3d5b460a706d4235c10995a3747cb93a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSHCRA9TVsSAnZWagAAHwkP/RZ3Nd/GK5skX9lChIAx\nPz2VauDCr9GMPcHvmkMNlqE5jh1M9eNqRq/lPIuakz32nRwPdr+AsLwZquM0\n4W8bkjovb4m7AzYC65xbJ5JVHkb9H0azVah5oWxwyzm3CCyWSdWrLND7TH1/\nNarefcT6c3UxFW23xR5BsD0S7fYE/GQrRvX8byR8vlBBCj/PqYYyrv+RPl3n\nnrpzkpXyEIyRkWIPFPGmOAcXmh+FKtARbjGsqZfUod3gfxNec9ujj/JiZbsT\nmfF0OLLY6IpFhk4YSn01y9kxkIFoWLNCenfVDeD3xShgq7noTtgGFS0YDn03\nemfenZR6gNZrGvAjT7T4ll1Vby0ys8Ktc+Yg+V38zMRa6ng1dKZo7Fry6c6b\noZVmV+0y8MkA/H7/NSpY2aD8YWivvfdOG9syRoZk3MhGF6bdQJIATDsHn2gQ\nx1L78IEIk2eHQqqrUUG8HwFaXBj0XvY05+kd+OZaDXPZnt6ThRmO9G7x4A6c\nbUnuAnQFAmAvi787Ar4HORJz2lD4uQpic8sxrPin/mCw6psFcXsmrszTphUD\nWxPAh07oLQmOAxtB30ccOcFgyjQA4AhtmDxTXrhJ0TuWu2P9aaqzoRD15fmD\nUzwUKKFwtWjWK4UEDi9hHwmD/6QrdDBKOb2880mMZX4u2CYrAz+3mrdPX+cD\nFr2X\r\n=hs7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhzzEggl7WhTDv3DIOOxdteqZcEeQpuoSplN2BcvMd+AiEAo+EyYJkx8OGC61hR/TU3WfiggXN2L3btacnvKlz1gPQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.f8ceaf79.0_1596568710590_0.4492651774443115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.6b9e385a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-button":"0.19.0-canary.6b9e385a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0Mu7HBJis/uWYnaLoQAwuJHs5t4zrdWSvQt2R6KQeVuYyL26ruS9bmEm/roqbeaZ6JKbb2ophCVMWiFsXEBebg==","shasum":"58282b11137dd8af95ba4aea9719e52c989b32df","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNgCRA9TVsSAnZWagAAifsP/0rdVMPbtMz+PxGuoHET\nW2+p0GJmJJa1Zl89EZjU8+OF4pWl9wfAMFbvMCLmqgx3aGMyNnztPXIzwqlI\nxWHecxZ0/82E0FBC1Z1MxRlauUT5Vg/dwiurd5BtbHa2ufxajYR9axibkkGg\nx3ahK4RHQ7CpuhtCz97nacKgtNaIuVBqzSud9d0hG56CivNvF/QiyDO5hx3A\nNIyBNPvHltTyeUKeOGv6eKIIFkWxpu9iYhBz3Qy+pgSA5Y1ovymFkCQRVsU/\ntIfcAccVIQQu5nDNq9hfGdApkPb4voKlOuoRiEwm8AHyFlfWnrSfrr8U8aAV\nm9JhbMRLP33eTSBOlCHYr99AJBr8jLq9BUttKL5M1TcFNgnwjW8SsS+cduz4\nRQAOf+8tbIuJ5y4YeDuBcP1L8DMDMDflpvP2BjNBZC3tQkAeY8wles2r0lBV\n+aoRnStYwAE9/854TWLCz/Pj+fdm2VDHIcNGLlAQKKjgx4X7nglWY4gtctpj\npu6T7H+xH3zT7mmCP1xSPhiTha4JeWB4hLKDrfqfpM7ieiuVoYvGS6Eyd2Va\nyUOLY9sKPUBwNlHR3rG6kDM7FfFKoQtD06rfkHt0YnLkOaRPnOyAMWovzRDM\nd1zebu+Ls26ZUGBjbhrnLF/mtQOvuset3DFW1RLzTMSGyTruSAFyOQ2CJ5rl\n60qk\r\n=Y3c9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhuM0ZlERkbv2U771XvuDUBVyt9VLrPjCxLaQJuvUVuwIhANXippY6VQqWZqG3mDzlr+qrsKuMVlvN0/2P+0pzRQ1l"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.6b9e385a.0_1596576607546_0.09621916386695606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-button":"0.19.0-canary.9a7e6d2a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mV56kK4EikMK6OvUX1hUV3W3rMor3b9eRVlRs/zf7O0lmYCrhFMqcHhpxQidbOGgVNFYDnzhujjM/oums/0DfQ==","shasum":"3df508fee8b2bf73ebdb9dceb6cba4d8ba21156b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuLCRA9TVsSAnZWagAAG4oP/R7S51Wd+oTHW8wGb0Vq\n56Ggi5runLHQe70U6X48tn09XOHAFmjMNGop+uK/cWcgYIVJ8xI1pUDNrfOT\nsDvOf2uaSMRnW9QAKzjayi+f5gGHM1yTZ6FJncD8E538zTP1Lk2pn6dn8Afs\nXaGHdO50Glu2abYoahl6twwe04Mwc0iiN+mewQEzsa2u82r3CiX6o5w8l9pz\nNoPWSTKXkGEgB8D5oSKSiuglqBI15Tcv7KZqGt8UxDBcTYkHxqf9eWu3RfkV\n2kDTUfCw/R/9i30vzWdqHZGDpvAz/n01wl9qsUR2ifqRNeNCpRQ7hbYE/Rxe\nft2t6I5INz+jnQI1kq7dn+Xf6PJ0ABzPPRm6m/dGQO5r/s47ICsB9Uhg0VQg\nySfoLLLb6lILqRECJ8WaQH44dF17kNsY+mk3xouRlSU47TTPypoQIVvgkDLs\nslJn2gd2cSJn474Qm51CGeIBaNKg8cIlLENz7ylVFQOrSgGRs96J1y7NQ7aQ\nU6hemgd2oF7yrcJVRAmUtDcP30qgHxrccMv+kMzqcdIwA3ruGquYLd+rDgH2\nekyG/Oua5kBav+qrt1cq3j8Ne3hfqe/KzwQZ7A4WrUEHwT/RfmRdcXKBWl8V\nN/e63Thv4Z5GfAE7EHo93SjRejZgNNSzLh04WIk7SjkUzwNNPc/RrYBCdxGH\nNnb2\r\n=Lhbi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUu12AWGY3YegdNpA8zf6Ew2c0qqmFXnRe6YWQBW38CwIhAN8srSxzngCSHbdFcYJvw7JSf2rI44dQ2KqypOP/EneN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9a7e6d2a.0_1596599179435_0.785142782216057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.188f3f1c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-button":"0.19.0-canary.188f3f1c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OuIY4XNoy7tjXXAYVHjQilCptHLiONraleTL30Mm18Br7O5N6s4EXNhbudauFiWFeEhKRXJgElVGqo7DOMo6sA==","shasum":"e11941faa84c57dd99ad6ffae837bfd9ea9db861","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbcCRA9TVsSAnZWagAAjRQP/3WVMjmtEjDPROMJnDQe\ncT05XRo3MxTKiL/o1KLW6cN0Jje4d0CBu3zOAZrTRtpA2sJgtKWnPUU/NnUr\nYc0cTMNkmajSmCSlJGZmq+EF853mbdd3HuC79Brzd3Z3jr3IyJOOZkNgXG93\nBrjthoGdZcbVpr/IHVLKrcLi/dquHkkzf9eBADIFyqS8fL3itaJO8d+fTfqn\nXYsmRCGudCIjz+Mb5KGjU/eY6gSdievB05Efx9Xuc59axnY/Tbq2jT39gYKP\n/xQFyuyHA33yJBKbfSH5hxZp7SK0MCiCZmN4t7MPaHLsb6k1ze21onuZ9zXd\ndAcAY70BaX/QHVj55aAopQLxZzdScSjKSJuAsTFzOQ6GtQHt9Sl9kDSfe4D5\nuov80eJRjcpz1fk4HCOyh7CH9DS4v/LxXr7VX+jhlOzwxDCI+WxI+HDEnAN3\n2rYyGCY2fOesDO1sApRMmINGMP4gEBV9fmnkgGjeUV8yZxveMaMMcrqU2DND\nX4YPjv+ffYHcPrmTOysx4PtGMDRGCE47n+2vpWMSxZ28+iFkRa22NhMlJJzF\n1bLdBR6f6RAE2XL96vGIXMyCVs+9jdCVT75P2MYSAMF7N1ldeo/iqzclmhPY\ndgcAec25Tog241UvMpXFHnV0QrAfY9ieFjFICOPJWo++xSzahTpB85W/Boxr\nLt5l\r\n=j6Yb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEOegYLVW03PNjCa2Fg2Z6Nv5TcdhQ8b9FVJ4gpvc2CAiEAxjSNfASZGPno5irRXgnVngXbDVIFHLLbt25kmPvJrDU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.188f3f1c.0_1596651227895_0.15245218564587182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.b6106add.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-button":"0.19.0-canary.b6106add.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5feK2vXpFwIOw/YAT2f3BsKWjYP8D496lZeDH2HkMg9cBm54keE19hZ35A3q5Kb22L5PSVvwlxosy/nFI4SAVQ==","shasum":"164bb6c06a7cbcae65aca8b6506925c19d6ee115","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtqCRA9TVsSAnZWagAAZh4P/RkANxLsc11iibkZhrJM\nGSyU1KSoJDQOkbwwlBqqmOOickkOkLiR1MVbg9o1o42z6zUnB9D2IfVweq7Q\nTj3PgeVVwxD7yu2xg6D8hJ8p8DjCxLFTI4MfoV87zQ9FaIrVujkc++NyfNsa\nth2ddifnz8/u9crNIw/UWZjKpq9AArQ+glShIl+qu3Cw613rXbTXnDoKzR8c\nWow+cLe+F/bSZdKi1PiDVzllcszooKrCi/lOr79f9aeWUKLYOILThRY642/K\ndNaeSH0dg/AFfpBchl4R+5qABk8aNjLCYJFVFeXt9GbYa15XQXSJWyC0VkKy\nSxIEr+g43OLkWaKia/nXNhwpLIOX25iiUtKxouQGwZA7c7ZVfQ6tB+/XqBmC\nb6ttjG4nn4mDrukhC5akD7mRyxyz9h3oBTbmORPyqjoUgjINE3o8/0rPWNej\nMo1nID5CMyY2CGQRSur8iGcvzaZysaHaYyQ3csdYFonz1av3HanuMeiwIY3G\nBfZIAIF6AvK4BFd+25jUqEd1x69aXXzHKY71af+4axky5U9M1TXxqhMADKWG\niIkuw8qRCg3WgFBRbqf/oviUWrmHUjh/HrtEV4CHO1nAImslbFN4q06RhjWy\nizsZ3eTn9QdkrTiVo/nPQ9T10yvfnqLZcB5H9zr9lU0pn5H1Qs6JavsjtZeO\ngqWh\r\n=H+4R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTJp8JPtLoquSe6rpMIvTdb0HtsICih8xwiicbY5uWuAIhAKINUhEcB8OfgakJORmT9J/AeN3CBcg0gyrg8ffnlks5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.b6106add.0_1596660585982_0.2593124829082085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.ebb4c667.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-button":"0.19.0-canary.ebb4c667.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7piMjsbDs+N/80xQ91PRQy288oqHz4dM/ePGsxXcElYH3nIR65sY97AZiu1R4edoJFmnHATuNCO0mt/+J30x+A==","shasum":"ed0324ba6d2959e8f687977a5a4a3bd8fcddb862","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0x+CRA9TVsSAnZWagAADCsQAJEb33/9BeH4dotUZ0e2\n0qAsQoyg/qCd7M9W9/Mx54vL20hAY04h6wyggl6eEkLryhtIthJCdz2J49Lf\nEEo9DhmxmPQe53sTjoQ/dVVnvYksqoczxNNl+d7CFsrF7204KDiOAHUPJ31X\nfvz9tGZa5KhnozJZfiA2ntr5V4ATCBiZ8mCXQ/oXQjhUxVw5x4vycgExKNCY\nDTbuKVmTNvpOIw0agCjVhaJO/6NAwZ0RVSYtxfd8sGGBMRuwNHNRTFbUdjx0\n/c2MGacutiBhpxhpVoi7UILJ/1lhuy3gc5THu3GUET4/CBO0vGPle/AQ4Kuf\nKaAbRLKCUNh+oH2wmnqaYdIh72r8wDBNlpRsyoAlOfw8jpb1wyfX8ts2W0XJ\nDbb/K7sIqiKDLv2X/Ss+lKs+GBjNmyt4HeLQHsdJbaJ5H+qwjQTfprRTG/5m\nhX+hGvXWtRjvAPxSH1hRIO6hPrAG2ZwBhnd7iN9pWB6BQh1mVs6+7scnrVwL\nT8zpuO83HkmkVUu2zb2f3DpFZlF9cD1cCYRuk6OVLHyofL6hWzFpvODYxVzt\nEIP3UJGJoBv6D/wLi3m17AmGTuQar7Gk32mdxFMndGKeuLmWJ/4s4BbnHYXT\n9CXqqid4CIoqm60IMKXy1Ek3EJoPrC4J2m2Z22g1EQ2/mkDBQofoGxqdMVtb\n441U\r\n=RqxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqDGNa+msWnRLd88wI3G30eaC30pHzPoeO4VX80NHfnQIgNaVPxUj/tVeDYJvgusaLA8JVORwrKNwZSfJv6F+mcmw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.ebb4c667.0_1596673150335_0.25097890621364227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.aa44289e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.1b44b43c8.0","@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-button":"0.19.0-canary.aa44289e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ATC95IjCEj8IVA1eVBcqetU5l09ymQGIpoXWQo4+hIFs689x+clWRXCB636gtQYhlXFT27tCr6ES9Woh/uC7Jg==","shasum":"3a74c79d2a9c0c10475f57bc0bca193ca57b0ab4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEukCRA9TVsSAnZWagAASe4P/3c3NBQrTeJ3GjUXNfio\ntwtzjdfngF8VsFRt+aKG9Bx/s45TJKEhsYN0fLedH3SrtJ83cbMHPPLY3aty\nDvebdpNNjFBM7YeO186vQSJ6xPSWreT5my16JPV8gd6S/CzfLj6mIRsrgPJ4\nkH67PK81hwOFevalVqZRmF1BHPt94tBBwAv3Y8IdtLJ/oYsYVnKUCHOXNv09\nvJg3vI69rSNA4MQs5r10XAQ2KigKkDhFWYNndJEP68Z9BzX8kHxPw3iudwKu\n0jn2jzuouXdFdLhj/0FYoVYNLv8Cj+RyWo5JrVISZHnklrKywtfhjxU9GMXA\n1xyR2K9YumbTwx90GyqL2E/6ZwJKQrBA5n7M/YX8hW/UVbYOokItUSW5n/De\nmTwQw4XIOGL6mVZROswjvhoX4eRGuOb61kdHymUEAtczJZTY8TDn5dLAKAy9\nt1Vk1fyisxNqQMzco2bs4LPQysBvoMXPPb7LxOIoVTulKMYHY2LRoHVZ3b1n\nEDP5rHa6cG/R9fPRhpCDWzanCZqpnJkcgTUswrviXfBx5xWMOVd6sA1jd6eE\n1x7EpVzA3xF6glwJU6aGdOwFSv8U8ZndeDZjqnTkthoaybQtu8c6X7uAFYla\ntbwlSyY1DUY7hL0qzV0XR9Wvld7xoAKcX7RuXVg2eGL/92jmOf4BXe+gYww1\nhzDU\r\n=/5LY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwgLBxD9r6Ij95jE7g0jcCcADNkBvsqISSXj/prH402AIgb7ErwCeweLx7SfyrLzaedpvHHlgw385rGDttI8xibNQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.aa44289e.0_1596738467727_0.01916304225732479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.e6b0816b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.96a640534.0","@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-button":"0.19.0-canary.e6b0816b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xrT8WTaSbcWCxAsT5yO0fllbjhdTgLhvI1ItB7nVdtvf6zunQHTpnavB4YKxcPPdsvvr7J8ZAmktknIb3bomzQ==","shasum":"eeb76a6c048c1ff1afdcbf6a492a245f70b4b202","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaD+CRA9TVsSAnZWagAAqwoP/3SpbzxULEjyI/zO9/zg\nfSFKSaAZ86v6uvSjeBB9b596j7Jq4pIjwGKylTPArPDxBW/S42Bjj7GGx90a\ne1J8VW4YxdCI1cSEMh/XAmKmzKTuqpXx5qlfRAMre089zhGG3cL4R9hvv2fp\nyMouCMXQpEI2NuT7LC/vMao5mtkrmC8iBLmzD8DpnER1E2k9eEwfoFbLNWCz\nqY7j+HoldhPerezs1352hJ9eODWUOnF8AaRcOrHFn8QR+1SFFl5VQLgSVfHI\nbnpB2cb3iKWxZ34/5B25gyuaG/fww0H0XPmDWyNSV2kI8Xq2t52GOPK92DeM\nFKh2yKlRK50mtuXHKROJTFJuZxEZVEiUtyOg0QGUF/+bZxEc+W4TwIiIq33R\nByIJxp0C0ciyXUIqdgGDpa9GR//vQKQ5JQzyYqGtV1R3puO9+YnBu7XTbXmU\nWErMmW9jCoMvoARqUwcs4JpTqDhJtN8Os0uUl8Zu/hW+Vysek8zsNPgKIdmH\n1gzoCOxa9/J4TgG0SRgEh94d7jfj2Y+cpXhJSRUlgp0ZNH+Eg6345ZeMODJ/\nHE5IfllnTe0//NW5967hIxfzulCxYBdzjA0GYL6Uvc1K13ZVUWCTrgxHw6WJ\nD1zJoLE+c/zrGeRrHM8jX81i4E+CKG0Q2syeVKK4r1EPL2DT5KAkzGCM3nZg\nlty+\r\n=zhig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJxJESuLjUXuKVhmzLm47U19yEIy1tBfNYdGTnnJC1DwIhAKHlPrG2WMz3JY5SwWbKGced9gbhKBZCO0G7lggGOUGD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.e6b0816b.0_1596825853889_0.5499884767266194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.96d15938.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.96a640534.0","@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-button":"0.19.0-canary.96d15938.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Lb6BIVnkk6ne7GO1Lvj0sOQyssZfEhPRcqYBN50F73SJOjBdv+WEeKLJE5Ec2TdQU1XApkLaQzYJxhYSTlYIdw==","shasum":"3f7829c313a31b8e5ebe1e7040bb192e5fea3daa","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmhCRA9TVsSAnZWagAALhAP/RL/5cwKQ7YOMxU9hiGt\nqqPgWNTJBlLvODIuxHKG4obIr8mzua4EoTvjVAZyM+Ntsl6l+t/vY7mThPOT\noaT3tJrUlnRgJUOhVDJ31/W01J/uKWUuRvAzLq8yz47dBXBd5TM1dYfG3QXZ\nzn/U3azgLMGs4LiDvnAvttmMKC5Qyzfa4jQsfYj9j/jJgFYc6R6b6IzlKCqM\nVzrb+cjY9xI9nU7ipQBBClCCREoFHkSMLW3DkIAnM2xe71MS6Q9HwMZQkMGW\njw13NXnKEFzdlJVvHcupl9+dsx64iQi0y0R2y3J4bNPZLvYC1AopEkx5t0m+\ndS9TTQjFL/2quqMYG2kNaXc5nzIaiIQWu9/PjzjMGBZolLsMPEyu87r/I8W6\nBz1URSfs3RFW+AWM2epzL3pnpzDyTcyYgm9Qhc2+efPuRN+QB8X3zrRjCInU\neTfP9LkCFpwjv3ysOq9kYmOtuh3k8jxW3poVITYmAouag4Cq4Hl7Mc9U5y12\nKM/xrcz+uIU2IL9LiAytdaGVdA+tW0zW+G+TWscECZLoAMXzKbuLd95rzsO3\nur0gPBQnzq5sbTMs/uxOyTMU9DR/Dc5YUv+p7UCXcuWs8dvPriX/rP9Rehy2\n5n5+3+piG9N07fZNKhWMcJyuMvTFflw+zjqK4WdVtK/jAg0mVciT4l5U4wNh\nBL5q\r\n=+lSv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzWebnKlustcdtEfyrv7hLuoJnu8uwJ+tRfkrCLiIj6QIgFZVWPZbBg66D8sxHXeixIznWAxeo+NWhJVw4w+yG04k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.96d15938.0_1596832160741_0.2751508530263873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9d991c8c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.96a640534.0","@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-button":"0.19.0-canary.9d991c8c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kEreHQ0OUK52snMUY2sgdeT/0yV/l49/Bl0l0/rux//13U+A8yuE7bP1ZiuYiC5Tk+AksGLmh+/BuOcFIsb51w==","shasum":"857c14029a3aad2054ac2a97912285385b5e1d37","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdD0CRA9TVsSAnZWagAAAvgP/AnIPyruKOOo3vCGJu+r\nQAa+15gFT2HpUcm8i429IFxbu4R9BVVV3qrqrfEZVjAmO6coSyCN2i8yyYRE\nEU+mbPirm/6Z1CLRaiqKENmR31/BKjglGZfcbG/D4Z3MckdCXDeJAipg3LTX\n2Iop47EADppXNuiXYHiVkwZksOHoXeMFV9A6FKBSQVZmuhajNQeRfOIAYkO1\nHpfloBByoZ+rZ9Y/6zbQHRKmoeXUG8Ygu+lybG45SDhiuoGvKpxkjt6NumLw\n/2Q4Offy7o5igRdmmW7BenR8yZX9G62v8m/HrYAMUigrSD7Sxd0SL1+yV9mn\nwXtoDAC035OWxdCNof7zz2nIz1VRdMgKCVWifkujVb+rmv53VICAgzbaLu28\nJqOgDAefBK312PLoiWLDfvENSuJYvzBzWoSSf6drXh+TFcv2ppjtIeQ2IdrW\nBqvd1j4cQkK8h3xxSupedY+AnAsQtdaXEP//lmQ3FmSY3ys9dfXQ6hQHOXWK\n0x3JZNJQXy8ZG7tbS4asHQlmvvHWnDX0etV0idxhlEAa3FJrOdV7SSAbnq5x\n1CdZ2byS62xYUtmR9kEbdimk6d3PLSMfs2rSCy481bQ+pAo1eke5o/3SeZlV\nx1456/iDFKPwpdaHdChs87evaJ69vjRV1GgkuaFWPEB19DD2NLlWzNnl/3r/\n/EGW\r\n=UK/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpaJrd6SE4qQACJGV/5Od5nHwHL7pEw/hNLSUa7qo/EwIgVOK0ttyNyQhknJGx6O7vLHwKL+QKUXFPLceg2X0Pyw0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9d991c8c.0_1596838131379_0.029177871777323894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.13bfbd72.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.96a640534.0","@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-button":"0.19.0-canary.13bfbd72.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RXY0YrDHOHXhwGKHT2odgza8PrC0MUSucwY1Eh9lhGi5pr6vAMW+V2+rfCZF6JTem6G3i7WjZGZQNqKvrcX87w==","shasum":"3943ec7e70831b0a4ff885ff7301a782723fa3d8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+yCRA9TVsSAnZWagAA1dQP/ii8D6rchDFBAi7QxSig\nkQ42dfqqbiIScv9pIzJB64TobhFkOhTYVsR5crOopWRCWKjNwwDsP4RZVEKP\nYHo9FzWDIacaGNfZJteEOqYv6vLIqBv8o9WTCzqEg4ngRpnMcllDt/rsLCPS\nU2K/E/2Ez71n6kFuyT71E185GWkxPJr8KOOCu7b3ROHKKO0UpY7Cjm/x6n0r\nqe7/naG+zPLsf7pFPA3T8ERWS0zw4fkFfrS7vc16EczhaSdE6VRaHoxHQofN\nMr6/5qbmbLVTvyhzhikXx3bqUUtS9yywBBwgrMAYtTqPogdIq3/3PEhP38zc\njsl852cXb6to589oRq+ZvYOO+uODukQFVqW3LBxOOanY/4NDHihdgSWXXn60\nyg3Vj6wDKvdN1Jv8qANSldeNNv8EmAr6fUOlNP6gK45EH2VM71Rx8J6w7jb3\nt296jM+kWCqlaymUoy4699wYsW+3+e1cVZbG1VllRoWgxShJpjPQ8LZQuxNm\nGiJyCg1e6SjEhKvggqoGQ+QYsXH2bq6+otOgPUOx0A7T/1MIw3k0AJBJsn/D\n5b1SKpeeQ/qdv6QeycKocMWNr4s5jdA0hKfmcr8Typhz9PlIu3QoiDcD/79h\nlphR5w/h0w2Bc/qP/GXz4GTT9eh4lGGwiarhqNxdf4X+7RDPjgEG8uhze8SC\nPdI9\r\n=L3iM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHnFNN3NvH6tQLl04dH7ZjlXOqJM5SON8umL3rFyQy7AiBlarPLJkALafKQ8t0O6QiEKRbV3JP1cUBcXm66gNqYAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.13bfbd72.0_1597087666085_0.254806961824549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.30b1b258.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.96a640534.0","@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-button":"0.19.0-canary.30b1b258.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gbZZ11sr0fQcy64xSvPZfD+/0YPyONIiPC7akfbLPW67zR6DejLmWyoMx9wNgUEcnZeJYSPFVeSGCUP2F0J5NA==","shasum":"eda65501130a014df0314d3238438faa40e841ce","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMaj4CRA9TVsSAnZWagAAoCUP/RqMIbC9Zn6saFpRghKH\nfEzNI5ozQNB3bGD7IUD6elcxRY4CSULNk7acrqxh7sxUmcWPdd76opUY6XUB\nbBkGTTcYZ+7gYq5EKP1QWwpq31mJHs1EstHrq69MYdLO1Tx0LpXLzP55LnP+\nn5MpY51BxnYpYKaJougXYTIswWsEW/DK8JfQLCOkXTMzXnmZcUdQfncaE02b\nC7+qE2ye/LgNdJHCvBgeFTJnHA/ov/HG3JO8inYuUTewurVwvkG0+lRdmiez\npdMTIdrAe8vOdlz7qgzMTqASFJ53AYTYoyV/5zymmrXnTy8GGvPTyaSUWoDD\ng1vJ3Ezk0ZKJ3w4Un4oBfkcWF+RuNlmj+S5K4xK0nh1EpE77qvGidag9IGyj\nzarxRvgyfi0JB66LvkwIeN0PqlSedjP+LnDxWRHSDSkne6bFceL9tNiKswMc\nVodgYya34z5KJ5owKUT2sZOXKVM4s6zqDjcomdDJMo2YtLoSR33v1jxMfKuq\nArtUiUYM2WJ3+iTmm4LbJnHekIFJXuSIBvsJrA4CWmw4C5qL1orbmF6Zuv1i\n5NrVviRDjbygYzZJHbLQTen8ZJuJf5Mi+IoXiVp2p6yleRH7wjjiWCuz2L6F\nQay226pA5vsPdPn5bSc2UKuDVrK7oYk0r8Bq1tQj2E2dUUtT7PrSQKYymfgf\nj8tu\r\n=WmsC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWCZV2N2MpbBGL4BcD/rNIpQgk5+RhYDwQ4jCdm7d8dwIhAL3xNR4THfvISxbwPdY3IoXP1dzugdY3o2QZ+YO+Fre/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.30b1b258.0_1597090040258_0.14004044286719863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.1583e263.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.85a5272df.0","@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-button":"0.19.0-canary.1583e263.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4GCcGrdF47tY/do69DD3udRpfU/jlJ7gbsv94aWEUxOZWEZ/ksLvKRVR1NzaFCOByYPu8uEMUaC/BOS1HsHInQ==","shasum":"c3ed124333815a772a751dfcaefab004d0f3a515","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWICRA9TVsSAnZWagAAWWAP/jyTts1oZR18quM6ZvLO\nhV/EAwlIPRZetAQY/QvAYoyevsbzW4FkkFawwAdmXpgMn7RbiCsjIPuJSAx/\nu6f5irfNU3QGoK1HV2T3QGESCTblL4ynUnncxmIzUHbEIa2l3pCzDjad1VFE\nEsV1weftmwMvxBtZMO+YG/bvcsBECGP9UCzeEMLHfl6jL5Af5pjMvNehsnTx\nURHH9+qVIRdOrdV9bVyo7rtjRQwfEOFRH4cb9zq4XXQDtYPuI+Z9rDVMoSlD\nuT5ibDRxYTBF84z4X0XtGvNpBY7xI/JmzKKG4gjsKmCML9H9RGMEHyGwYrx+\nj/hd/7wVPqcXk6UCJpXHIaGhrSRdSEyrcxjtATWOZsd6/aAgRTM5dtC3U2KM\nOXKSC77hu7IqRHFA52UT3JY8JMug1zidL3jYdakxsNtTLjg3vUg6SIb9ZcXc\nPZDlqGFN6iJ7zeplSis3RmeTizl2jtiFMm6evbv/Lv6Ozx0UTVCqN7MMrCkR\n99O76mUEzuMAT3b0NzHVLShcREbu10xbyV6n7TC1IkQ/WqE5H2glloQ98Ind\nrBQOKsCZj5eJOyi6OexNwSHa266VSF8mdD7Nu2MgfE+W423chbf+ixcQMlvk\nnJAkp6i0Nr9OUOdDB1S3ZdFrTQZs6xrlFGEEFigakfv3gr6zZNRcPYVOS7Ch\n5P24\r\n=LAnH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDki/NfduKNOUbgZ+oVKLXazTz9i/LHLoNh5Qi6YMB+EQIhANZwkVPtu9ocOSTT0DN60jlOXAmHW4pe/Mt1Za8nTh1/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.1583e263.0_1597187463687_0.6983673998340076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.fefb1a93.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.85a5272df.0","@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-button":"0.19.0-canary.fefb1a93.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WfANe9qTZhv/n/Tza9Hmq04yw6njqiViMW7ae6CDmvAGThhazQqt5ekI/8TcJne01i2Rc7JZ8G5u1z6Vrq7JXw==","shasum":"5da5ca0c855d505181151e412d41120deb295bf4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzb4CRA9TVsSAnZWagAA/qAP/ifZJfo4mTwDB1LHUmTY\nyNu31UV1NkDTppQN9MAAbNoAdjRDmWv4LtxdthJSEpGU5v3VSJxcjO9l8x6h\nlz4lTz6J2s76oWDcaYT+IgZZhBazNpuvpR8S5T7s5Fk6DB3K/e407NDOZ74E\nJwCQyvwNK5aBrTFvcrPHAHIgRax6wa5avl5BBQNPNoP/zCJoQNStRQ5aWG82\nVlTfsMA2pZQUP2G+LCToHyhTQNdDxlvokTFH33WAyc+g0YIQG4FWUXdo/u4H\nIyzQmGuc5Rv5mheHEA7a2z7KLHtvHZ1qKr4SIYbsCbjUYUAWdmsTLaoTWm1C\nqxr8ODXthkO/iHq0QH9NZ0QUP69sV+4OZnVqE4Bnz5aR0Oqjplmk9Fre44+r\nVuLTK5Ts5yr+YWzFCMhjX6LXr5d3zclQmsBD6s7c49p/MXiSq9G6q+S5xNlV\nyjIHW9IUUpVGOI+L4lZhF5VzzTfKFRxBxaJeVr5W4UriM4FuuS1jmMpZSY9g\n5sd84WCFhx20ZtmFCOzyWxz42Uwdl5Xehpxrwdz7k2Jx3eCqnirIqQBomDop\ngIKkTQc1K9IQQ82ExS/mtu2TVfLSt/HIT5Tq4Kthftgx0yWICOk+3XRMm1+9\n4gxsbtH3MhcsFBo/k6OqbYtLmYyBgqaQHl1ErDb3DfV6QPmby/RgBRvPqMEn\nLHCQ\r\n=umAp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJ/bYq6oAZu7pQE2ZBroYeRDP65VoiR9MEbM2N2UzNKAiEAqvxZd7MamU2m8fswCW58M3p6TKuytX1XhamgiYYYdDY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.fefb1a93.0_1597191928267_0.2469363029182543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.85a5272df.0","@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-button":"0.19.0-canary.1ac5b9d4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mGuRPigZYbynBV7+5Ecrg4b/AnlShSdVgdZLZT9m88WLeOattlx84Exodd7v0DvU/uuAyWdrOLV2TXLaWuNNIA==","shasum":"54a6dbdf4b3f1c614d96908d5741c2c73355ff1a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSjCRA9TVsSAnZWagAAU2sP+wQBntLaXOxMHe+5zGit\n/UaGwaxfqtxubEIK8j9506uhCnp9ygC0AlDkukdZLDSumgpz53a1vzKbrjEK\nn8QmR2R+B9nI6GiGWIgGCERdx5mWy90MB7Z+mBN31bciSxYvenzqeTPGi0oq\nK4JdfczTK7RRuvhq2nIW4xmOl+GBr9ueHfHOeGzBidTDH+UVXpI4aTsuZcVp\niQQ8nPs2ty7+Ywr7BlE/MsXvX26zGn+0Kp6BEMECyQScNKHYVvWTz+0YUXBE\nl72LJE+TB4XokYkjdhYoAoDOjFYczI0tF/R4RY9ViAcSjjxvEblmaLLDHNST\nILwpQjAGPkv7ujFVbCP/tbFf+kXIToTkKJDXNiRwmW6h0See3YnXXZc3m76y\n3r98PCasAvTKhdGnfZhZR9HRCknYLjEbIoNNC1OwAgJEZPC4PloihA1FciQB\nURHM2Ra5zABEYz/0pPxwhu163i1Sav15cp1J1x0YkIGZhHcpFDy0lyqRogKz\nVhZfF0BtoRGwnpIoTtswsy3qSrViTOj56c+vPH+fj+SNn2+86NHT5Tkr4lAc\nARZjRi8BP7wMz1DwK3Lj/LivxXvnYaJEiBKc9ntNSQ6PY6eetJapcBOB3qrR\nYeRg3MkxltcN+mSOz43Q1JF8FBILADlyYe/F6Q61EVNVe57a+V1oKUSRdS3R\njeaJ\r\n=pI/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzgHIxTh8AVjG0XJbsoVvg6dHM8y7R1reRaXuD83nrCgIgP11+d0SpPLqoy8QzeZ5AVyDpNHEDEs52//uBUA0swlo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.1ac5b9d4.0_1597256867417_0.8852849731064003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.f17f5052.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.85a5272df.0","@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-button":"0.19.0-canary.f17f5052.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+BSNUDpqdRnBIkIPRk2lnL3Mj8ZVLptUNY5xz4K8pxbXLSYZr6BQLJ/MoyV17L9IWODV3i8Y4APzfCabP6ODhA==","shasum":"c7cd7dc03d31499ea90ee56aeec9748d5e7edca0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUOCRA9TVsSAnZWagAAp0EQAIfT9xgUiBvYMu3hYhrd\nYiCLp/t4oyBugkN90cwvVdUmDoE/8OHileCL2Zz7TvmzxlvZzn2b0WIoSMum\nbLaFT6pPFOG9Org5WOA6SkbkHlzPIJ7uCUlBAv+7790KN54460fZPxyZuqcq\n5wPG0ArkXcNl7CJGh1lZGmVrzV9Jnz30MNE2/N0EMTH8IdQoazlhhoI5Ymhg\nz6ot9SI1WLzQN8O+773KCEmY/2y2nqOqrQ7BmPk6pn0unlKLuTQhyaabat64\naoUEmBmqp1leJYR9UfCBhtOeqFV3sFbbTuKy7SjU2euv9Q3JhgLuPJmqyQPz\nG8BhjviIRyG2dGo3WQDB19ZTYabdOcQwPWzdanyHx2yLb0eWd0yQA4Vg009O\nI9V14/DbHGpBdvmeGGVL4WJRwEUHCVPitFVHnEQxSPjWwbnLjiUchHrgLcg1\nbhE2hASOuXpB5St64RnA4xgLXuqL6SK8a3Qp475ZAKWa5REb1eduUzI2hn1u\n/DUi6whT0bn4WuufwDVC+xrm1at4m0pyykt7eiOKob2fyIchrNFcK4tuu3UN\nScP3XLp/utyPKV3s27aA6rASRa7we2iyNptYpXdvTdvMnXZNsaCZN8/rGfVF\nUcASzSorvr5lU4h/mPUwjVQdWTLYZeDdqALMkTqvaEtkkK3Lpud41OBWB/ix\nE1f7\r\n=r8Xr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIOvW86/BA4eBCTzGjgMNlBubQotQ2fiV3RR6cj1wI5AiEA12Od5TaNu/u5lLUVgVLYHGlK4O0cKOW3ZZHXMEW1nDs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.f17f5052.0_1597338894006_0.07821480158017535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.80b5d20d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a1dcfe97c.0","@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-button":"0.19.0-canary.80b5d20d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qXu9c7C1O/OXFeDG9YRjvl3Bd8bFHk30+qn6qLPFkYdA+5IRmlILK5yCeUqc1dFel42fbjvU0SwkQcOI6Iflog==","shasum":"01150a0fe43415b07e4fab807402d99cf6020d30","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":116623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYPECRA9TVsSAnZWagAAum0QAJPph1/xSEucSv6S/WHK\ngNFwhWfhcwq+VKXw9AwVkEbXx8HVGM1Dbae6kY/tO8ETPdVLECJjaq/5pJzX\nl4yEIhx7uwAkBfAT1ilcUdfp8FgQbKz2g6zJ8P2T0yBGSCXf3vuRo9rzl+bX\n1RyfC1BNKAwa17vVBaRCwmtecGeBjfiGlKE7fHG3+maZMpo92FyAhqHmVZ7h\nO2CJebHtNHMUSfsR4ow3j7fz4cfQGNMsIFybv30EhntLi80Sc/cIM8F2lyr2\n8Cby7Eiw+G38a+HxktBu7AcuszIhvF/YWa5qsYKCoRnUn5bVWCpyewkVlH0M\ncm7Iht2vVHklIm00SJ5Imoq9jf3CsP0Ex80uLA9Ay0WysbR2BiH6iR5O8y/n\nrttmD7A03jKSRlc5LMAUGUV4j2qxXtW/0QWF3++ZB5U157/kRhglXZpiH2ZL\n73oqJ/oHtX0VLaMRNzdbuTaXD38YSq9rfJTQL4JVxzj/d9/yDgytKelyO8Zh\nVYsa9W+qNE/h3rL65iOpYF7n5guadcOjtYokvi9ktpbZb+6bgCuhDJs332sA\n2NfYN6PHTEAA/2RmW4NGaUPY7j0buhBF2XTDq7K7pBAnmrPY02J+Fh0HVW0E\nXdlCnxdHAvNw22XWD+U4b/Z/sA9/Njbh8SLi7ORkKhGJSaDVM5kuCYr3aGed\nxFDk\r\n=m1PG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHiEoYardSfujOIJb168zPjj2H+pRHLWBDQtBpxUme+YAiBA/8JQjoJ2+cAVx/CvEDhDPMlF0vZm22ZoWC/MUUXaGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.80b5d20d.0_1597342659805_0.09739983357002457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.758635ed.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a1dcfe97c.0","@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-button":"0.19.0-canary.758635ed.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RjlJqhR5hT20b9opktev0DQX1+ZgAGuFLkg/6eCt7PM1k8jdfpF7zyKyWIE9GcKinhZZhcUlX66g9nEhkrkaGQ==","shasum":"0560f54c0326b976016a8798cf60e20fb3da5519","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":116542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscOCRA9TVsSAnZWagAAVgMQAJgDg7QqbaBQ9zk6j04H\n9QLLw3+KTyGgSzCOHPn/cF70yW156cdSel5/Kwfcr+/MjjBxJAyu/pUqsZQb\nEQymHhVFIZysAzsBFNHDObBe6ucfpJDDMVe+rGW9afl5GnZNZ2YFwO7CWEE5\nTODX2dnfnqQAN1GbEPMVpWnvexp4+/0fW50KU/e4vjFuRoi+TyumRkh/V9Tw\nXNu6mRn6W8SYYwp0guS52u+PChyiaRM/MzRZlRUyqUyVkQZvvqMU7yUTcHXQ\nND5e+VyhYECXNDGoEFwjzAvcC0Vp8LIqPa7ZWQlVMrs1S344VhdoRSu6SlNm\nEoMHWnT18W7ZPDvGUhbwYfpCNZiYPZYWAp5k2ztoHGeuj6yQuhrq76AfvocN\ngD5CS8yxDvSqzujQtNCaLNtTrxAu9t8wy1S8CuwF7k5ykZTe1zjeFUnog1/B\niufv/0m9+ny8Xl+aecH9l8RtdGK5XPNJthxAukG0bE0dpj2CqgX9PcsOX8Yg\n/NzRD9J+OavK441L17f7ggYDBmqI6hNw1jhwO+mRXwCc8g3NX8EadAuMv+dD\nmvQruefJgcnHC8dC8wDRaHRWkM3HOvQuSMJ7UC+chilFcOFYNmubmj+XhjMH\nyCjDRwXKNsm1DU6vaAK2KZU6FrvKUoGjuZH+i1VYaD4D+I5nC+PFkRHdlFlz\n2As6\r\n=0SB9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/Y1QEojmpauvAuN9hDhiWRlK1Ti8osA4VZF3ipD0G6wIgWU6/HODLY85ZfJF3PKG1d2RmxRTTVLSulTCKSVLzaHk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.758635ed.0_1597425422280_0.443814824629712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.18d6b808.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.150f427a0.0","@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-button":"0.19.0-canary.18d6b808.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kfUtMybK0nf/B08h04JqSuJ3TNV3vQb4i5NRuuwU2aYlrgIuDt6FAGa9Ak/Cud8FDGPRRKvXsoUyec0TUW40lQ==","shasum":"ddff70d8956ec6bf1a4e8d4bec7fbe98a0a882b8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":116542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlmCRA9TVsSAnZWagAAmwMP/1yKhIxbtAglpbbUfS+c\nI7r55T3FaRGIJF3nDvnnQupWjMRuJATlwW3SaWzunacnPlqxw0Fm8nTZq12J\n5Nk5Bp9ouI16OqRsyXp/wTyMuHnibtQ66gCkE6ZNTzV1E6H/buN+EGvaqZXx\nH268seW0xbJG6nkqWbPKFGG5Z5S1fI3/01tmpEb9JoezNKSOHb79jqhEh70L\ncR0/alWC+po+sksa4pddk5FEwcuMQ5DIgtfypkU2kT8x10Yc/OF984a5kZT4\nc/LinqGINPyEuREU0Bj8VEmw0kZCT0YzFtuG1ZFaUsu1vF5YmjNhFy2lb53r\neJ0+1y6Q0yRcTGhl7qTbk+9QPR7r0xD1E54WMRGNbA0TVD1swyMRSN30chkT\nr4QSPI+nZtPJn9Cn2stA6ryUXiR8+9WcKlOF99YqlMZuAx/bzU912W10n+N+\nVbnSFOBBXJmkIX+u2D4Sl/rq3mD0yzHgnPb29Rm+AD8FFRDmUfl3yRSn4fng\nLdTjzp07cSQ2FaehU0hQQO3K1lI1RFSzNEhpy5/ijrmiuhwoQ/4W6NnAErOA\nAqcpqeMLoDZuLcmsMv84wMXVRCeDilz9pe8xbtNfl4pfQOXjZlfKsAMbaDmD\nqer55AHj43mTeSP8NVRllOCWuHdhq8qBTgVtvJz3E+Cvk4tONPU0DcGuPdzd\nYwlF\r\n=gTSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFByu6t1OQYY5u+m0Ww/TgBJU4JD+uHMxiMF83kWdPu0AiAVzSue5A/Fmx7fSjtWrtU4sL0mr2C1qAlQYz9WWenAOQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.18d6b808.0_1597446502285_0.5854360348863052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.150f427a0.0","@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-button":"0.19.0-canary.5f8ffbd1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-F5FCTm/dWoZihBPAoY8esFaN0uyV4wEdhsuwIKj05+fnyi5J9HqBH0WytNwAlrJUzaqEGAgplFHr4hT5t9BxYA==","shasum":"c52f258970babdc82e3e533a45df19f7c68be987","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":116542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGdCRA9TVsSAnZWagAAea8QAJ7ni7T5g6/Ut0eNdtMe\nkvACzbhgHTVgVn0uYOyj36+Pyq5TjvUzaJNdnO40mewCgTEchVcIPA3EAnIV\nqTQNl35UII4z+/bKesjYt5OmypiUJb24wH3inigT3QPSMfqj1H/FEPYqeIlw\n7FXS2S89+Bx2rxPMZm3y0qLmeN4t67IQjG/rKPD2IC72304OebyO5fzZ3iwZ\nSMh+sDFpWRp2pEczT5oxbMCTMGmO3VlIEgUE1lShUJaXJwOsCrXVSMsM7Hwl\nQXH4Qh27swF/xDeB53mcDkGdrEsV1kvCS5wQr96EPcUbYa9m1yggI4bqN+uA\nNis+yu/kVkka3YqKCkht12r98rLGzlbWQElsWV9DD1tkEduQpEPJd2QW68Xm\nAyDqVl0X8JT68Aw/aIl6A79YMf3NpKSza2nHdqPwtP2E3h96i68kpQ1T2toI\nvCfc0llSFHOquMz6zWFLb6GEQNTrAmVC0hAjum5RCMWbvHM/AosMKa9FBmZZ\neduRrzGM/C31qjWk9O4r3rRyfrDF/9Q5qplfr3M+HkdpuJtMvYJFEJwIcwuG\nPd5FvBCGutBjKe1sh+u9M2KXsbsdLRLMLS4YlDALsA0OFQ0Ll3QiB3I5W8SQ\nSqMS6TnUiPUuAdgy8QprN8fdrPOwZUmczNwImOG0ixE0NsrV6xja8d4mWnlu\nxNhG\r\n=iv6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbMBUmaXZb1SLbi7ms84a+S0Y/bfnVw9v923nw0VB/+AiEA4iUdF+piP41OKpk87BPjegWiMMBV1BMfvGUQgcvyods="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.5f8ffbd1.0_1597702557332_0.503524924880558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.8604d59e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.150f427a0.0","@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-button":"0.19.0-canary.8604d59e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Zikq6bvOS4t2ZJJRThJI/kQ4UqCmjnBdcd1mkaGQF5qzcGfON/YPiRdEvecuRC/RDMgr1ewyxCthOiEBc01XaQ==","shasum":"9a57045ce3a488437ab46d3383222a06d55d05b4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjJCRA9TVsSAnZWagAAhfUP/2BBRXetMe1pHzxmTtgs\nntpSYwD06mTKJA5oWnh6hqQwAyV47oEjuN4zJ/z9KTpf4EhgFfMPypc3kCIh\nPvUGP95RCcntcILG5GlGPvhy8q81Z52Rwi/QexfxUnryL3Swaf6ayQsoScmR\nW67c+bxX5Xwe8nqNLSsb1lB3B93GuVByIeGfqoueJvJbylIdOE8bbLU/BFxV\n+U25wcJJjxiF0RYM/dGQIls6wCQz2s6fpvHv0GNb/BkbhyB0njH1Hpo3n+2g\nQMRiZhyI2fDq9rymLdXtCnep/EItGq7X4CyNRpkv5YsVI8p5bWaCTOQ+Q6wH\nCaFR1CFOWmE706PUNn/zkVbBSWQap6V8rNIlWeojwtZM+DNECr+WENd8hCnj\ntoMJmiIH/Y7yVp3/C4ImGAzvMkLLPfAcOL9gFN4vML90h5XQuCBpLvdfv1sc\nQwBWF1WJKiE+4NYob8f76+4MQd+A9Uuy3mfzMHkAm7msyxj6XtgHa8K5mXR0\nFehz0djJY0WjvdKpBrtH8maTB3JbUSOYia2b9GWJsigNq0QT9uqY9mwCEHFs\njNcNNm3wii4PAFftH9qoRO7mbkwZx9aYEhF7I9jnSWSrlvBZLRIJbfBlrN4S\nwezwlbaqhYlDpPeKjgMPeVcLFl34gqxPjkQ9JZKbd6fSwOKtxFZyPr/dWh6O\nRhjP\r\n=wGcu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFf0QnHyQF3FZWNkQM6WagFVHkxhbbA98ZR8FnKM7wk+AiB59NWZaAb8DcvzV2kS2OLgYpQh/riDmc4Sg3SwAYUcpw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.8604d59e.0_1597712584839_0.2351221772174381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.defa599a8.0","@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-button":"0.19.0-canary.1d7d5e34.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LO69mItbGZV1DUU19WXM6/XRTbAQ9pwt4Xf5NaYKVV1JuXbWH9EBkrFi6wUpA6uz2dJRk0f7v3fUhZGzFQ6Y7Q==","shasum":"0eff9ae9a919ba43f78e96552dcbfe01e701f84b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOypECRA9TVsSAnZWagAAv+UP/3uI6250VZdI6ImovmUG\na54LFhB/2jnby8/NGOsGWtTwu4Q2MAMlIHjAwM2CANFqkE533cHdQmOlDtKl\nKCoeWudwKmWkrVyl9n6Ej/j1YUhmmG42fgxnEOiUlTFSI5DtdgWfA4Xo/ADa\n2zLIuWgfeD81SrqUlzZoQi90E5NIYlU4l5XlQCBgXbpESCeYWjnS9YxTJkwR\nhJQcoYf9mdFVNzoEpxbYO+2LnQfcULMp+PCiMmL3asT0AbeftIA7BTRDPy4p\ndScJwqws0LBYJFUybf/STPIeqIfK3blDYysiAsKiORTzwad0fSJY6f/MquKB\nhM4A191Fxf9Y9TgMdB8N343iCWwcUE+MRGnUoOxFc8LFvcn/IshauebzzV5d\numh9sMapagKU2xvT9e6Oi1obv3mpZVClC0gA523PdOZCY0p51nOpcdkiLEPA\n8gFHU7cFBTmytK9AfqdBTbSEKRDikI31yS+ejIEfHiioex0xPNkGYiDDA4CM\nCo8v17bUX4ePdB89e9oHJj2vevAIvaA+0kLjYRfNrZM++00eNB0kCjSPcK21\nG3773IAZpiGoj7ez0O/y3fCntt+dFpeudq9+BF19Dz+etpUBPprsC2ASjslJ\nSo1m2Tj2BgFB+xCymV21yKlE3AMo65l/VGDUJrZ2vaogDspZQeMlDlJz0XhA\nkK4+\r\n=oa2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4Iv7eCRX9Fdk3pFYghHmBMy/ONZsYVxRDBFR9y2BOVAIhAMlXlTEw2O6jiJGxYKa16kr0eTGbM+9sLm+NSrB8BSBv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.1d7d5e34.0_1597712963564_0.4917933664135783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9cc95c07.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.defa599a8.0","@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-button":"0.19.0-canary.9cc95c07.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ALwyXrfPGXZzfDtZGnFeag+SpWu7jkUP3U1fVIJLbq+FDyiRWiXcrBKxX372iNlAm062BhMoFKss2xO96U7mQw==","shasum":"a30e8c82e350e194edcae795f4208e5865adf21b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywNCRA9TVsSAnZWagAAvmUQAJS7ig3KstgfNJFU3DLf\n4xii6LHf7iBIWkRCbeg7HhWsExY8El+XZIewkrOrKqY20wORLAu3xethIvYT\nMLSgigR5gQwFQ2xX31JiVg7wsS3A7tlwGacQ81TagmYENXWL1nKd+pDt9m8F\n6vX7q9YPp2LAb1hFGkpThWNJX7y6TGR66/G0tw2ec9zUGS9XcMTY9Szi48Za\nButNNL51reFT+V64vvUKqri4gsAA9V37376jt7OXZA0jl36SRk5Go+R351NA\nZGqoyPcD0UP/agYi7RMWw9ddlAF+489B+2KP7FRfLKkl9DRIpRdrM9FQVesh\nFe5cL7iMEPgJtkq81w+Gdhm4+sauqUfEBXSvymxzGWpcM9pGRNL3zt7RSS2y\nY8D/gNHprTWNs055auC30HEyzGuMSVYLL1M2VEQ+58UgRdlpb+ae7o8Q1PT5\nI0/BBRw7kXWDqYa/gFiK2ZCerG/NZ238MrJFLickorxq4kf6eWpUTvtA/gEm\nVE5e6f+74i1xgbgazVwXVrv3EQMxxl7N/tycbQz6prfzpmY+SlLfgxEPCd6M\nDCqbiVKKOzA35St3BQzs1JGN4nq6XepjfReJPeisN0I4mv1qKnqQQ+kM8Vng\nfykwwEPw1cKmKkE7icnInZpdsn7UAzgwgOp2bwjyoXzHlSf4Y4iyn6o3yXFn\nrFWL\r\n=R4j1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1pKBsWYQbiHvMBOd+2pRIcjd8MLYaevrPzjiASv0MQAIhAKQR5PvSd82ZSZqbyysHD4FAybeTlqeeWQ1Eh0fFOFMf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9cc95c07.0_1597713420565_0.5538446554014536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9f65ced3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.defa599a8.0","@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-button":"0.19.0-canary.9f65ced3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/lMdB/fzSKCxMC3EQNNjXHFQM2pl2YoQeJDSOYg2RbDo0Gkchhsj3/McVi/WCct4//lueENjkXdyZ2h0djABPg==","shasum":"ebfb76b6f73f2ac483e5ba8fe1ebe5f436395575","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDccCRA9TVsSAnZWagAAaLUP/0gjvtcNgKQAbf9X4MPU\nxCVSVIdSktozF3ogp9EoVrTPwqpN1H22JaX7IZq304Mx2IbJ1en+i/AsD3XT\ngCP2QFyfuya+9QUCbL0nqBzCmRxC9xPzzmRFHWYkOsemOAxZpzZcsIx/AJBe\nhYo+pFteKsZZKzlboMwAnuP4ICYa385ThwA1NaMt2R9NLfQyiIQWoxihZlNp\nKd+E1Upg27roMysDxrfvf8tvRUg/4Nh4f+LrjgKdNS4GaJ1qBRp+kvb8vvKv\nKFe1E7lWu0dIKzKtO6m0BVapwabAz9UcXlDy6k0+9qZFwIa6GAjKoM766uad\nv1f1jZhSV/7F9fysHVttPoRwFcpDTR2YfkTM8DDlbMppX60GOtRT5DJuXj8/\np0AyET8NfV2Z1iIGowc7SF3ncV0FSycxh67CSPI6pLUwvuAekxpRkxA1Z7VX\ni+VCOoQjGFTvfVj01ua/FoO19afidLJaZ7lFXfBNJ/dE+cfzpCGNSaocL1lv\nVtEE7M7Bix60I8C8L7pvjmECk9kJCI5AfLySJJ+TJO26jLTUzQDIv8PBowWc\nM4oVEWN5wOQKOGHIidsmKc7TfCXsEG5K6/4cclMIrm/ToOFyUCxp46bFqBNl\npxF7iJzafuUxOp/AuH1Bb6TSkuWXtu+9NcRn9gKO5POqjT/asunPHXUYnPL3\nRq8H\r\n=S61T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+GKFlbYcDYQEAEfFUkvpA2Cb7hacJrRO2FIvi0LgXtwIhAJRLxxWsrCO8bgO1UtAhuUB9z12tmIpSeLvIcFF48Tci"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9f65ced3.0_1597781787541_0.89484777496768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.5962b365.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.66b8ed7e6.0","@material/dom":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-button":"0.19.0-canary.5962b365.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"=8.0.0-canary.66b8ed7e6.0","@material/rtl":"=8.0.0-canary.66b8ed7e6.0","@material/shape":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-58MaC9mcf17WR1UnKEVyW0ZRuJ1KDQ39hloNC8LgQd3jCQeSXaSNZDq0k//AScnjoid2892eWn2XV1RU/5tMkw==","shasum":"b5a6f3ae2ffab6bb4c71aec340a0993e960ef083","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuoCRA9TVsSAnZWagAAeOkQAItM8Pacfv+MmPzz7u1t\nF1BenHpKGotHSakpOm4AD+GbU+vrX0O1TDylc3X3IzD4M4xbIOkuYla+Qzl6\nHbXb2JNqiHTRTm+p31IeFH4oM85tHxNkObx4hwTCao4MAMpqQs+CW23LpslT\nDPPUhupsHmgx741TNTkNHGsZsGAPHaR0U8rcoEWB/XsBsxLJU8hu2qC7SFwL\nhh4hlPe34YmJGNo2SfKC63jcVWLIQmkVYasXWUN6nLGfQF/6+imMfyq0tPPu\n2X5brWkD7vlXr3GTYsgmLE14HV6qSiHfWpeCQ4aiGYt5+a+SQ18rNLJA4MaE\nxYxtiovjnEAfUs2Q2g3a1xiwa5aZonZqnpCgLRlgXHAneu53mw7zZ2cLnye+\nyaK9qyb/cihOIblyz8TDRFdDdDxkdcfpyQcrOlFkMn/IxSk0w/wZZ6+JuIbT\nQFoANKB4c1U2JcCfMajczK0QDHrGSR2NQqy0rxW7nXjjWfEg/VEPsDGN73+s\nM4jlsOVQQ/UgEFIWVL+g9LoA20QnZUR9OwaknQzk3SnQt+RnDKFhUc++4dYm\n+V4A3jg0LkiYSwpl7uUaWaMMp4K/cOiWico+4OtCOTm0W3ETRIQdMSQ97/Dt\nk3gFi+cJGChi7Vo18bftx+YdZnTkq+HMW4gs2C2ufYeEWazXrpe72NDzh/f6\nCa6M\r\n=+8cc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDR7nTuxCLTawE70EW4AcsFjSTfCNPhamsBMAoTNfesEAiEA9kh7yzkCrhciZRLQwAHzlD8W2F4OKa9plFaNYIRfcI0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.5962b365.0_1597868968297_0.09885334830392067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9c9ec756.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.da72839f4.0","@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-button":"0.19.0-canary.9c9ec756.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bF2hDpDGvCiGsqeVtUxGxdA1Cz62MBx9ldrG2Q1EilrnY8PxgJBmON7KKt736eRTrWjxFjMXbbmMkjnLecKrVw==","shasum":"6e0eb3de1445aef8ec0e34474562c759a2309dc1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":116530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdPCRA9TVsSAnZWagAADEUP/2mtb6D1SPNd0TYowZMc\ndgzjqqf/4xW/8n9HKdrsOljUGBfEU91C9Cln6MhCnpQdUQ14ng/Tcp7ux/Fu\n348wm016PEjYe7IIDE9UD/DuHnljZeOtrXicvbosllIcfO33zCN1YZRWAcpA\nMvBKwzVgYtd8qLqI0AbflPv5ZTXtz5dv+vA1KJq3RyJ61QC4w3s1IGX1ITaj\nqNd5bh4U89NwPRoHsSqTgtMysypbOzK3mW+dpI7zWWHRavodaqDy9B75Bz0E\n3l7IfbT3HbapF2Dr0gwKvHkwY1GR+UCBMDrNBBy7Y+dl9giA52ckiQ5WlzQK\nvjQi5SRCj7OjhaxYRVdyTYG0Doz/ETPQ/yInGo+FiPcxpkr7IVqom447gVBp\nIKpd6pQ09y/PBUahJdmLu6MS2ry2R0zzZJN8PRJLymyd2KsMo4YUY776DpEZ\nlUNzg41ciiUlQ/wTJosa3AbOy53ik/YKN5jbtnUstHpmehZ63RajYSYF11C0\nipkIVM5LTRIgzOCQo94AQQRQsDisw8gC9fbQP4Er7U9xvqY2kU98IDtEzkr5\n9CfZf3aAEtzmt4rT/ASfjjTD+GAfN5VTH04IU2eOJiEm15PPMPZ2B7ofdsO7\n4mgsVK4a6w5vgMi2L4/T/76Onezrj9uJdDYVgVtvJv1+Lt4P6U84+n5q/CXU\nMIyQ\r\n=70vj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE619C8Ywk8hYm/JWDvQq4oK/mRBOBLnprXTLCik2FT3AiEArERY4EceOnN/k4czYAjeLhMnJELDXVsXK2Y5hbFNz9k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9c9ec756.0_1597949775195_0.3396081023791331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.da72839f4.0","@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-button":"0.19.0-canary.fa0ad66a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NhTURSfg9mwyuFkEX2d48SNr+NbJFUlPqHQXB+dfz+40hE3yABq9BETCOhOYCqLt6lxdhQA6PoBhyYqEn9LUgw==","shasum":"d1f866cdd92bb8388f07276701556effe1cd310d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6NCRA9TVsSAnZWagAAKOYP/j2vVq9elkySmje5YJH2\ny+WxL//6CCr9Cj6tnicQBZXpIl1u+9PD8y5ABaND+GSgwTuQbwNKrrg4e03e\nH+jACw92UkfSVO457hlL816l/ZoK0BhosiyeUBpSVY8t0i3GO8rdwr9NB4BM\ncs78wVueZ+SdwLTm+B4f+SJVQDWmLcBDNqPipPD3tzFP73XwF1/E2ZAnGxQ+\nMcJv+92vvP5+MMMdB6tgOKrYNDtEwu6igNSVCq3rB/7srrmkBwDDt5fz0Kgj\nIMWo7DyUF4tPpGTI1VOZJLfClG1VR5uXL6sLJinJIG3p0IjQjSIT6znc+GUK\n19SpAwj7w4P+yj+ID8yWdJEbWOiqi977R/Pk4krKTn9CrKjGN4C2qliyXYxI\nj3nFlwDvvCJ+tSnLfkgzE7EskeqVa3zIdshfEz+2LD/O83rD80+wQLcZhXrI\nHVeelleZOpDo499kKTTdgE0Go8Oy+tJDeLEMnMNk1RJsTZ0YoYIuBgrGtdyT\n+wFZ3ikkBnIr0avhwQnxKczmm9s01XWbSzdq2Fue3PorAeGqM6H7PX3orms2\nn48RSysbp4T34tQJ51efnED4UFF6qWl65E0h+6i8k4S72qeQSs3VZvzrdy3w\nmVIe8X+i5pMhMJo08gnzMnVLorVYitN9s+9+2FYRSSf7nOkeGIVYj7lynrzv\ncRyr\r\n=Yltd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYI8fsSwFBixCzItVsItL+ahPI2LThO13AOkNF0+o8XAIgcs2m7pxz0tdly/dMkYIQelVnunrp0o6fWA8WTg6TduE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.fa0ad66a.0_1597955725529_0.40135372158753935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.da72839f4.0","@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-button":"0.19.0-canary.06ecdd6b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cH/WWH5C4YlKyZyNQV2/OEWSS/ZriBLiNSzvB2VjcXEJoKxe5AuFT3XADyIMFm51m0j5tGRksVNkVEvhrmTVBQ==","shasum":"23c58ff7f8d9c876e110bee9fee86e23790a20f8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxbCRA9TVsSAnZWagAAq3oP/jNtBmR9t5/BxzzL1j0A\nBX+ffMQW0/jmwg5AjF9T7kqZdAB63D8/cr7JGMyi9DY5OGDFebhD9x/afv39\nW8phDcGRbJmWJkryKDKt2Q5ndCdQY6j2SOD/CqdoF/hAZUDa+4/rZTXCvCjG\nLXotjQwzcYxGZMDX9jnNu+r95Gwpljrl8TeLImkPsGkXVpEWJIvkdrJI4X1i\nMmt0eThy/cJy4Q3ibdmOC6EjHG9Fxl1hrcbHyPPHh10v+7NwxqMs+2MyIc+p\nLWu1DNFSL7yttFVr34LO+cP84xgi4ZepZx5wMaSxUtoU5KbSh0r961IvnZ7C\nkTh+lRxE3tOWZ/keE5XMntQivKuK/2xaGs/UUNGg4aLZAEn0VlMgehDvX9jE\nDT5W2oY/po7De4GCutGd3V/kik9KhZktJNKmKkG0ZY7NWgN2f2yKW1+J24SP\n+7+6vhu0sVJ/52xb5mPE5R1vtfE3kBZUhPKtKTolQN+nfo7jAeVjqZ6cBUDv\nnoWT8VXRKukAEttHXtriiatYNxzqUNS7ApDnk62erzIZJzB9HoED+E5VbPxB\n32VuyWydQiYTbEGzzQI/PDiYAxZNE0k0XRbx2bDnrkwMMZIXVSwCbMT//rLk\nWLbstiRnnlSDznwxq5XD2Ovl6std9NncKWrvZPAHSoKpl3a6rM80q6g72iwq\ngEy7\r\n=Vqlf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAH5t0IzTU/NjCAJcfydn7329LLDCoYIMuYbcJnby12cAiAV2IQMpdbSqClSyt1QHplhGW+jEv+ep2zoEDg20m3TBw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.06ecdd6b.0_1597959259384_0.021551504864742554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.2bca2318.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.95e4eeea7.0","@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-button":"0.19.0-canary.2bca2318.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wpeyVFrnXiJAviOE1LpnSJTorK0ljoAcyQIB6rvKMqDEOHKx6y/L5AFiT8Ei747ad7Yn6Mnq6DUEAliRVAZukw==","shasum":"006e6e3ce8e8a115b2b791e835faf95eecd5edb7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnzCRA9TVsSAnZWagAALzQP/2f22GIHzcFkW+E3HA4v\nP7NcVNpuqEUyDIJavv/xyVMKJ7plwYWbeSFHMM2sbGJ5nhD6YLcjFp52vTBd\nDSeRbZ/gxpJyP5++rElJp/LaZMjCqpjXg9kt/stvbsjzGG+i57JETyXnPyBU\nF6IH8p9Ar//zNMTgmFxWjYOpHoAlcDlTHMuaDf+vvCKbQjRsYIU8rwcYj6l7\n1Pfs9QKnMVocOUepxcOHuJv2glLzUEsxPBEBZf0bmzEn/tHwTkVLOaujzU39\nzkuxesgsTzBs8XTPrGu4cSbNyOq57QR9zswUc/sx4nHgb4aAmWnH2VBCytCU\noYLlu9FCY1Dp6NDb48dfnUNPOTDLOeXSS6wGC64ZPMLtzvfI/unbsPSHTRpr\nJzV3I2s6QrKT+R8JvSt6WZhIRGx5xMSLTQqZK3CNaLD6hNnv8TFlvlySWh0h\nXlv+UtLP2alrkWHAyFkcFXRU3zOk8GfySJwJQhADmrgj92KiIf6vfBGFetbz\nCYtN+t+QpYYceRRr6dUQnVnYm7nhh4qk2RDG3PAX/ZQilD/2F7pwj9qLEmGo\nQEQDdm7L0gQL3c8y3VDnctkrAOkBpXQt2fzToG8FuQr+BgmxfhAZWowDvloG\nMQCe9vzk/tzxvAtIBSQj5VoefkHJppKf9v22Dp/6OtyPkdBKTxCGz7zSO8Ka\nIYE2\r\n=gc1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrNk2JgiM0z9q6ZO5aXhdwr5c8ddy6TKHUTv1eZBIwMAiEAlHr/DVO07MLbNagNOWa75PXGPSPNoe5f5QjhB7gyvng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.2bca2318.0_1598032371250_0.885263403140272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.6aa47265.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.95e4eeea7.0","@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-button":"0.19.0-canary.6aa47265.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-s33hOLsWOESdza9yF2Xq6Qr3KlO8le1HJgO13qYiPXveZcMDzMFFNP+gkopHjasHiZW/l+NYF7o3RbBVzZqrDA==","shasum":"90f16f625faae0879552cddf2ad2b0e04314b76d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA+ECRA9TVsSAnZWagAAfw8P/2IUxy6psaX3wCsTmGiI\nXGRmdL8SW+IQaEVH6mdMX82c9YE/Iv7txeKJHTg1fZQAHaS86SG4DCdEFA3W\nGGJMN5VPErzhPuy8iZJUwg3v2jGWaqrQrafDBGnDI04WEqjyrOd4wTHxM5hL\nTAqoGQNgSPbBnxPBeiGqbDDn7DVtLAKrCPm0IWcZY54YeijZ2DrEfD+gdY0o\nYBb47p3boQq6fI+uQ7e8X6TrzdMeGZ5gx5RRHoJVgDUn2H3eqqUYMVws5Fn5\nHjcE0ANr446FocoUWDI9Aih10AR2l2KoOlA9Qroc7NaAQYBRVB9P5RENkxj8\nmsYtmJqTiNiVd+fRFhNuf9kWciJIGy+90/kC/TGqdbA2uX4928lknGwjSxb7\neObYb3I+UuVBl8z6y61lQ2aelIoHSl2aGlGGEWkmaWJl1duJQzO/p3AyC5fR\nx/LMT3wRMvn+wUseSc/0vzmsd9euDZhM92pVV1FFzvvlzfSJ5bHvkph5IWKK\nzF/Clw5VmVnFHaN/IsRiGaJfKKNsx4+KiNQVrmkyohAIwK6gfap/fKtq5ddY\nwqTOkQ4RSi+T7FFfQpIW8H9rb3W4THqw8IuC7YyfKYtr23yVObn4cycO1tMQ\nrbPm6hj/zjdYyVgpv1bIZOciB5wKobIihkiPN2R+WLUpkS+hTt1aytvNCa0R\nT8gP\r\n=N+0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHlYgQwbWHhZ5dLBqCVbLNq9Aixy5yE+9MQhetP6kmXQIhAPJcg4O+G9qabPXKQd24Q9x5haYDjIn6RZR+HOOpfzb7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.6aa47265.0_1598033796420_0.8780063644792047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.e7202a07.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.95e4eeea7.0","@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-button":"0.19.0-canary.e7202a07.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VWd2vUc9OFXNmPOrqogBLPOU02sgQBWigy5JQQyk907rXF4HbQJTJJKFkTaXOga89qvG+LXKH7EMrXyZX/5oyA==","shasum":"9e136fd3b71ccd55c62fcdb32f8340afc9a0a1cc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9NCRA9TVsSAnZWagAAjTUQAJKjRH+WujXiVOFpquZS\nbf7yckfIFk8RM0BOajz1d2e00NXbXqDdKqkjj0yumKcmsvkmTB1KDOyljTuH\nh7v8AKaxJP/B8VAkEVmHvH9kpxnlH3+9cnpY6z2fELJnfIYJr7EPh+aVpX81\n7SlW76Votrsx8qvQsf3haKeRu+lpuB7K1PqR5SFc7WFsFCwNSM5WlOyxKV6O\nr7Xn+MEOjZPvNqlpLKaLOIdT+uWM5V7tj0XIBTC7He+CL4PBNORVm7SLVxXJ\nmoWMpwLdwkHc41VIH804yLPf0C+Tc+zHml7QoZKUMSxul/HVQhF+anWxeNAO\nFYFw2hf/KFozHmOBERzUoMzfoIQ5g5HgxybHBbrY9S8SC2dudHYppGF/LQ5x\nN7jwp3NqARpOCpHcUVaWixFsvAOCNCRPCKZ6QziqHlehwU3KYJUOgQy14AeU\nnUmxAC0C5F3hF5H16BBPRMCsQ0T+9xmkfBHSTbyRfyEwyr7VgTkeIAxkVpMI\nxd8MNES/KRU7V5AwccvFLFqFqgKlDLOTeJ5RT++vhokpvG5HqPc+qxEMNO+z\nlqFS6+qOLV4vRpwdC9Zhiy5PcD5Q6InXacEVIxs88dD44zQvbi6eUK5cqF1w\nhDNO8WyMzFu9BDMSc7uzAY1nseBSfB5zSGl3KPGA1XTZkdOBJjwaTpxaYBeM\nVKf6\r\n=U0My\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD048r99tHroCDgEZlddRXueoTVEC+Es9BHZT/4+aoGKAIhALcffNjb72hdXF3uPa3/Su9NKHzGrRXAnOxeRDfV3MzN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.e7202a07.0_1598037837453_0.8218218246466316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.f208201e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.238216fc4.0","@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-button":"0.19.0-canary.f208201e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.238216fc4.0","@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V8aNlqGie480zViJm3XFO55ybPfdLHPTM6T4zJj4cGfiUsTiXFz2Al1mMRRWTbra+IXYBpXbJALMjXp1MbO0Xg==","shasum":"6e041703abb837f688424cf3cc194c122d2f3d49","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8HCRA9TVsSAnZWagAAQtkP/j+5e1FnNYTX2/Wc3bNk\nOG/YROL662ldfbAMMnwiNniSWTlhrRWQ7wLjjFtWJFQzvEZRma4chx0afSJh\n8u+YnnkLy3dv3EVPuVSsq0rhzdXZhbqk6QBb3lPEotoozc6iNazC1rZKwXPc\n0p4wYXmZrdceAAdtxqVOwKara5ZJdqkdBV6i59jrsC1HEulxc29j2qiXpsWj\n4B5b7HuLlPc2NzQun9N2yZfprKaiy+1CGcxhEhWM4mlsF2xhwz989oORon4y\nRnlpF1aaY+EbAU1AbgKrmK1zuLDGieHjwApe2cHeLnAq1tFQ7uyLwzNZpo4b\nwaaaB7F5Y8o+XMgWkl3U9OCldL9t94ZkqgjhkSsk8eo6LFnTg+wg7E1kYWj2\nlxBh5amCIL9qPYPcK5cDkXijGiHCUJri8ab2+fWvhZl9dTst7+Br01xyILHx\nFN7MChPunFVTfTcuq6NWggWGWUXiS/ZTWWsq/hzH91yrDxEDU3ZcxYxRTuYr\n4axNA/5T+PERtVx12n6tUVgrd7HwlJKMwSvxVhyn+Hk+TXAZOE6BwlJb4s6A\n6X3ydqMWUgahp1C3PDh45tZ0fadIoY640d1N7jiV+cyA1tumr/ocAnnnuAA+\n9+HsttpqOW1JqxyJXO2RtY/YHDLBBho8UcYbTGgfnvO/mZevsPa8hmdxWntY\nZRyX\r\n=SZgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+ydA5i2HzhzK96bKJzRenlWzbQX9qQyf2SLSEGON1RgIgFQIv7KF45P1AWR8234AeS44YC23Ar8INYznA0jHWcks="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.f208201e.0_1598295815391_0.7063554850270244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.14a172db.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.238216fc4.0","@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-button":"0.19.0-canary.14a172db.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.238216fc4.0","@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WGCY5JXZVsZKB1MlAl7pgCva5OiMUik+Z/cJMMwgqrwgGKl0a10mLX4O9TsxSCpdTSsSdOnjNxThcSRRc2A3OA==","shasum":"c047aadcf3dc93d9c391e707392c7b25a1ea8c82","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWr+CRA9TVsSAnZWagAAOG4QAJNdfDPsy5ZQNDoE3Uao\n+SeuXg0McwbuySkBbqnl0FchU/akEVPx12W+LWDZAfMvgd7JHCXDcnOCjzXH\n+I1Hvu1B9enAvy6/r2Bf9HYSZOgbIybNleRui3PUan+DcDen5UQdYNclq4jo\nujLhpNnqQtOGhtNt2ndocznFMPykqlIakcbt6GyApL73CrvcpM/frl0BDdIY\nF0hPk1PMRjE1mR5wJtb1rfXWryirowDGKmN2pk+nfBBXVIFAP1wWMveyxN3e\nnDDA5MSMTVLzdiriA/oRzQPHkD2l7HosKCE5MyKmocKRpSohHIsYSK/zun8M\nQImhKOw4TDClwcTcPxgwb/WZiXK/pmHofd8FCNN6gbHQJ2UI2Ndy1KWgt37w\n8ikV20FmoaB5q9+r6Y6PFID+asBM7PJKcuzDZmjOCapHxnl3wVYE1wyfQpms\nE8Dc1q3ww01/wM3sozAOBTUL0UodBoBW0pbYkAOqq1AzKAk8GOW/xMuKdfuc\nX+M5A9ITx6qVs0/HQ/0d3BG9A0XgUuYZErFTtuJhCf4YBcQC3qKCf5Hd5X6o\nEzzpSEJSzhhV7c2sbsSFK2Lg+2cPAkIYEpqGEGS5TwluPg1L82fn9r1zruUl\nWoLjTZNTN4JNtd4xkpH+1kqUxU6421fEqTlx7lVVsJaQNWqofyZBkU4i3xSc\n2zHe\r\n=k397\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBojga1fskzJrpSBNSweNfX1se7L630jxyyH/3I586zAiAiSNGo+tN833QRibLyEMZUGcMakNF3b3tQtp92OxhJcw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.14a172db.0_1598384893616_0.6943864652394285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.e6c1038d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a1c65593d.0","@material/dom":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-button":"0.19.0-canary.e6c1038d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a1c65593d.0","@material/feature-targeting":"=8.0.0-canary.a1c65593d.0","@material/rtl":"=8.0.0-canary.a1c65593d.0","@material/shape":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Fa6q41XsPxkBi+mEXoAnnY25nHf442cS6LYO16Uia0a0JFM0TJbK2/evAPSSUr0lRFviqvAazqCviFua+Q+xoQ==","shasum":"1c7ba8a0187818eb6a755de5d9c2523b33e81892","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAt5CRA9TVsSAnZWagAA9fwP/3MU8y9pGDKUjqBB43at\nqoNWxpZ/adKu0W7YZz2gbZREIL7c5thzeqE2NmjttS5YJp2xiu014wAp5aFp\nH1iCQOw+jAz6ojZi+rBwNSOHHQEaCkTh1PefE/5PQJlr7t6+6V2drlir5Isg\n6IWDc3wkTx2OIseaFTQinahQgdsL8CNKh6RJdMesplFxlqgly/qoOAZ/gRtn\nq8P4SDU7SSEpPr12FrD4Sji/IFgksGQeY/xnvbbJrHkq8S/COjLMKYx7gsrj\nDIyF92aAVMPirbO1+C6uZje+/oLRLK5Gj454yCPOKZokJRe1t0F4MHBPPeK7\nhh/QqR5pLcFvQ8IDuReHozh07eD2bY1V6qS7zsbS23YF5INIqmZ5J9GNmYGf\nu72HDpWcCrtq4jQekezHpVzbGJivNSYE+yI7NuHNJTmZvrzyBslG//WqXTFV\nEykG5869E2NK5ai6G1UlgzjxKhbMUK+Ah0GTb5rNiPM1hjeo8wxYwMacHUi1\nSvJ056bqmdnruCCBfEr5Gu+58rRlzuoJpmF3j9qWeWjw+XJbEq1MBt0BKlzw\nE2eyzY2EFsPdixpFOGGG0ZybC6r6WwChW8sHR5ekRezV6OmjhPaQD46lk9V8\nMvfIVX50sd2yvy2ivtnlWHNEOdauLGgR4E5V8yEJFnXT4cwl9LgHfpQAM5Wb\nP/iI\r\n=yvyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICciR5UnP8ijHvhg32N3d6B1wB3mW6/6LBwDTfouw0fzAiEA0mCeOy9picUS3hVKWA/xJGqKCTNzqOnpepDV3CZW3LI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.e6c1038d.0_1598557049252_0.25633481487875165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.34012082.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.238216fc4.0","@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-button":"0.19.0-canary.34012082.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.238216fc4.0","@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Li3zN1yvTZXrtF/gG2Irb+lLiO/h7/GiBwPb8OHGsi3NfeQC+XKLLTCLB46+nsEkO1A9Y7xG27+WuukTMCI2YQ==","shasum":"f12a28c009e4eba5bb7ffa413303e41adee3f3ae","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4hCRA9TVsSAnZWagAAtCAP/RtLnXRkny6iR0jLjcRd\nJvhod3jt+AtC13sFaNUBqjheZbp+uJxkuUrMm/aJUauIWwofMLiQAj8qoaLS\nQtmbk2ref8LRUvse2BrVfzlFpoQjtUp2ZmnJtWNYNoWsjvhS/J8jTpxgrRR9\nnVl8bWV/QV4YO9AUrkYGqxoVmGTl+j6tuZF4i0MN4OSl7h/S/tHfem6oMniv\n1tXMqnQApZrylWDClPspAG/9C32AT9BB6P83Wu1VdpGkURT+evUT/0Uq2gnS\n4aHdZmims7oaqSSjMPQOEt64WkasTMmRDa6PNbOHOV8Z66wm1ahU8TLjfa2B\ns+H9KK8g88AwYio6ZQz6JxI2e3eE+TZKMuE2yarw7AVRpZwkRYapvBvaAHYR\n0y6jL6vZK9XF4mwM1/ejsbiJYWItNxWAWxsfPDm25P7Xj7CxKWL2eAoWA/Wc\naaNzkU1f5wTbKDuepqAbsRzpCsA/bBWQQ0yCKJYflJXXLH6Ayk5a5AJXbd60\nIH356MkD+7YnHOJ5iLWP9DnzJ/QWsMGoJdoY9Wk4Y85su4UlzX3V/tWjBaZg\nqz7YCcWtYzRw78qkLqN+Td78iJbbtTHw3aNZPj6jpqdTPDGQ0DrpbqfwB1Fc\nwbY/32wF0ROoBr/ND7U21bsF7TceY2hyH/me/zUFu9P7tMnnYgAj/MtN9LSn\nW39h\r\n=ulLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESjzTbggEIaA+iuuZTQXhql/EY+7rEo6hmOZlqplrojAiEAnvAMuVhzqKLty5tswIe79CNvbIztbdpiXZ9vQsP3iQg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.34012082.0_1598557728976_0.1400281014059792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.c073f7b8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-button":"0.19.0-canary.c073f7b8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NjNTxUnKUarSV9FLnk1gAOp3PokXkQt9t2VJrfTtLMesE9ieAEhknMgQi88HYOFtaENkmVUKbGpGIw1E3YpHJQ==","shasum":"8a05294a8cda3f3a91a3de1229c2a86d833122de","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":116596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTsBCRA9TVsSAnZWagAA0wMP/2XyCiY4Wh71QuiSp61n\ng9TwEp3hoyZP7EMcG2u+Rj+xJmtsTCiM9g+KOl7yKyZP+P1AXNS4qI1zX8kD\nB/Q582ETqeeZZty6wnB1ura24akvrJDs3RI8TIlFfQy2Rq3DeExH6OXiHuPh\nuB9RnaCc3Y5tcKBcAUBjGHwx/D7MW2Cuzk5QYuWMclHtrx5NeGpgbD3WgLyW\nZpUqsF6Cqz/tkpUbw3sATKrrvsE0mRF7E0G3LTEpNp1Q9Nd35L7sX2Tk2ETG\ndFe1w4HmXH9xJ7eg1JkVdAX83l4b0fUv8F4mEH6qG2yk6rkncxZegjXc8LWc\nBpddHgqPlZB9AlnOoFdwE9ZWeTmjs3io+YuNZMct9XHcpy7cyWyccGJh2ZoB\nhMT3bDIUQB8HIV/j3X1NxqAGTKt/JMLNwy2WdebFMhVDPRF7dWtQADuKO8mG\nv9bt6wjJ50qmhArmOTNLkLw5EITeJF23ds2YMaZxgnkkkld/WR1cdJyhi5b1\nEtXtVhY0TZI36uVB0eDdM4FvDjJLtGE+MJQ56mRiGpnaFfEx7BbjB41Ai9no\nTHBTNZwOStKrYaPLZQR0nwvrX2c2wZ6PPDPwfrvDE2seJZE5cfuyNCyMQz2v\nSmQs6Mu92ShxfinOtYAvrT+KCb2Y2k4qmIlZIqSl7DVGTuqJ7f7iaX2pULJs\nBjId\r\n=nHuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD53BaOPeZIK0nELbk/BtL4QLFYFftHwdx+HsaB90TffwIhAPwzBBE+XPV/Q98fOtT8Y+tB65Ki4BcJZiDEqDoRO+Qv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.c073f7b8.0_1598634752901_0.7861256196886526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-button":"0.19.0-canary.b7ae68ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AA/PmevZstwuGnKCeMgu0f2qxjGgHqfGoEooc1rW1tv6ZaFqrY25tpfqP4RtjmFdr28z4R61Uv/oCYdZgJV98Q==","shasum":"7cfc7ddb39b79f43f6b9ce0655e26047df7b5ac6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":94044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa8BCRA9TVsSAnZWagAAy7YQAJKlqmBXpA48nFiKOL7h\nMict1PnqMKo21DupF1jl89BpPPhTMGRK/LD5DQ4u8E0+ggfkBHximFFJV1im\nKbw6OBeNFij8uda8OjVY49jAjSiFCd0HS9wzqYV2SnBZ820qyHxWkZebh8y2\ntivI6P8rg3QUI4CfQ4cjT6BSUadbFcogdFx6Jz3wv50Iw2E06u7lk9k8V9OA\neh4Jm7I0k+nsbZG2EvtSE7DNrodl7ulfCkTcGb9fwoi5SkZnHaspYNMg7DVQ\nDUs+xp2wPueU6CACmAKNu6+NPKXA+XM9zi/fV+d96ax4LxQKZ9ggG6Rgy1E+\nyrf7UX5triB2mRD8VUjF8gKK9qy7HnDyC8bCWGiPVNMqzzuGnj+O8eRwJmuW\n3gljNSiC1+gJ8OZ6kO0s3raxTIrK+mcGIGIpWFnyyM1DKNFLYUSlWYjJR1kV\nt8pNJAxTK7TZMmkTWbC852TpKLpRM1ZFToyLYU4CDrJzFxcqZIQENZG24on5\n6y3VgfJEDr7/FzCmxBgGB/5oM+tee+ou7wzsqhm/fASdjeCtsfsjgstBGR5A\nJ73TSuuU5YJ5B/7F31Qk1+ZP432bQSIP/e1qATOqCwn1U6l+fJs54sr1+oCY\nD+RckOcXzVTu9FCeAzgqKv670gL1Hd30SLBQKL12kMCUGj+W6yPfZWKPyySu\ngYyH\r\n=xT1x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+sorX2oFE+i+QSaRiNGZqUpQ55OLWXgUlnk2N7FtAcAiEA/R6GLXUyec+D1849Jf/om83PdxGeOSYnIiyVI3QgOEA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.b7ae68ff.0_1598664449273_0.9699297066223966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.697e3879.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-button":"0.19.0-canary.697e3879.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y8YBhJ8kA8sxvCRJaxmt1UjXTAMSLuDR4GPkp3rXEnF9eJIv4hCDIyR5uxZ4ddALbxovLh5U/KjwMvEXUFOeRg==","shasum":"8d2efe6b3680a11de145dfb9b82796d208ab7362","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":94044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOwCRA9TVsSAnZWagAAxhkP/iFt7YSc9nm7WBJEo+A0\nmDI75ZfG4q1WbrjcZy5gD4sOsRHRTjbnVU3Ma/hPnNzUEoSW3iZHUmDNaFIs\nX9T+hmLIt3XJcMRrTEVio8z54It0oOxFK+0vRZfhu9U6zjNOkEVkyS4Rz04e\nvA7KaLap29U9PA25sRDywVtb6/556j1MCJgq3nct9ME4d6g5qEF7cF/tSj4T\n/lB51ILmcwtGT1Z/qyKcvpJFjEs2PuvcixLNaNwwjkbCk30SL8nBPpa2DyX4\nizli9Er+Ff3hvZsWvGuPQx35z+PWXR1EYqNacMGruM1jFCtWiU+24pVdiS1j\nTlfBeMj37QJJXhQIu9hUvo17NhkFJ6BKCH1DuViDcx1wQbdscWNHzKuV/Kf5\nGE9JR3jGOV1MhvUcDhsUdAMEq73ERwdX75MARrTO1y/YvsMiuj1PRYDatzpJ\ndzRP1nvBuW4xdTUeHgv7xBVGR3/rDR0ZJ5PVYLMOU6fpWFIiDWtaj97FZgVj\nuS4r7d5D3rhqt5Ow7cYD13fV3EyWBtI2RIGhogHDHnZQmbYflwKG0uyTrs0X\nhCTt/N6rSqLWPrCJCadIACNpFno3gEIlH0YSjvCHQtgUzzBvtubPu3XPnspy\ncUAc1fM56cSN3bR+i519ULCPveK7W6M+zeDKJtJa0zekWaG5k1bQSd9jTzXc\nAVQG\r\n=8nl2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID74iI2e94YKgo1oBNbs+AMHQwskxpqZGtuc7qh4xGtTAiEAzphtX+KrgDXEyp+IXk5jRp90ftIG5Mbcemea19qWPHE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.697e3879.0_1599005616169_0.4707408042408754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.eafb7991.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-button":"0.19.0-canary.eafb7991.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-theme-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/dialog/images/color_fff.png) `#fff` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | `4px` | Corner radius of the dialog surface.\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iruIgTwRM4HujhckOXb9tqEW5crCiBUE4eQfkGLUpAt62ZFlqUfzoBjpJ1/onPQiJ4/kKQB+MtMQ3DVDicjjCQ==","shasum":"938330b7cec5b2b7a5797feb774195391fe5aa78","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":94044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwEDCRA9TVsSAnZWagAAZo4QAJfywKnesHrGx5DcRcmv\n24J9IE7J5I0D2y22Vdp4TCjSU35bTx148/Gg7jpLbx6/YV/i0U95gEeWcQEx\nYngtfLilLBvLmZ8XdXWf7PoJSqvVsgDq0Tmj0oI/pV/0zwYE6skEDCMKW3K9\nObEjDi70oRJc+4XBi9qU9U6nmNNR4SdHn2BeZqVa3VCqaU520KEeFVIMu1SK\nsJybmeOpRW7H/MBH89n2GHxE4sGBOt9ZW1TCTzmWExv9gnfjzHgwVLwJukcb\nawLZBNuYSgYkpZ6Rb/EzuJt8/ezYhH5zM47nM5u7LoS6YAjWqOgfWeHT9PKy\nAYgf8s6M+W0KODcgH03kkJbZCDyBjAtsPFAo7RMcVgSxovDS2hnvf3DjzRb/\n22dg/U7kbNZMaPVAKlikDWv++luijXgIukgaKp/BmhXiebdNh3J+lrWhxdE1\nJjz+4CB5BiGdp1zj87IwNXrZ6g104EzGn913xnEmrhhbcxtV6qN9HvGEM5OT\nOAalBaeoutmxV2VuYpy2GM90pVBa4/ULJv72Uw9RklsMMDmzucgqJ6owMxqY\nnnGqIyAZYcvlePzASJV3VUNuzSoEadDqLctTEf8/aXGs3tMfGYIYlwyNruSK\nTqwlKT7QF/1GbIhLoS4N2FCtQBdoYzSD85mvxgbjEpoJR1fqn5e9kpBv+C3H\n1ZRR\r\n=I4bI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzW0I0bU07Ea+2I/JBE/F3thGnEUSPPTC04Ta3OhzTYAiEA6Glxqs4sjDwucUMcwPEZ+PuEj8atA3aOOPbEK/kytLs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.eafb7991.0_1599013123353_0.3127612198549037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.606642ec.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-button":"0.19.0-canary.606642ec.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E61WaSCdnle65IRrwjyoqrG++5IxNUzv6gQGGDoVRAsataSUziAJpTSmCj0Yj3iuwL7qlcEzXk3QpQYpeL6Kmg==","shasum":"7fa7f7ce777542071546b7c70cf714a3e61b7c61","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBA/CRA9TVsSAnZWagAAX5kP/2Nc8duc2Vv4UqYbPQSB\na8tjnkEcB1zmcMZkLeEFGGUcIZ8vJl0/GFITSx1MQ4Hr3f00tDAuVHODRdJ7\nZ+cAyVNeqOAuiY4J1mbbEfZe3c1/1HuU1VLrm6yz7+CTNTorH62iXQcAwnGa\ndAFL2riA8soEU9hhwv+oss6JXX+14Xp37FC1sJhDFgxSrSr99sFKu9gv/wjF\n7Gcg9ttVNjkvySPp1wFRJyCY7xz8KNF/MpBtx0tUmYcDvKxrN2JCQoTLEMkL\nDSTExQQNLzYwWV4T8tMXlpJFk6Fp6MKSIywrPwq2sInFCaVAPJfnQE0FbhJ+\nzDD7goOOknK5d+lntQ22rc6t4Hl0fqudnmsXsPRzTs+KFVSkZCqooVMBU+lp\nIDX9KV9sSVe4qdHa6n0V/wYCSqIeZ+1JV0ZRbB/2pjioXh21gBnnMtkqG06a\n1k7FplRLoqC6dKPgUBd/ZnzzDTrcAi84Qy06XBrPSlu4YPT5epm3RIXrhOlE\nD4fXeBrdKq4LjWzqBcEaYuVrbTOlyhi1gOj2en2IKXVVi8+F2DahaTaRvy9I\n+R5f8ZObvHFmAoec60t01XB86FWAYyt4mbGCeF82pY2kNvEnFPgG+ziHD9Ul\n3dRl00ni/M/g2BxcQnMIoL9RFZq+0xqEkaA+Zyy5C1rhsztM8EHGqvHlrSjK\nk/Ww\r\n=PP6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGKtboZ5gonf0r17HHd3uUvD9N8i/GrB81X2wHRNGoXQIgIV3EfZ2i0dQ16OIQOiRfdsVZKu77kKc6T6c14Qim6ZY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.606642ec.0_1599082559622_0.5572159854723637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.ddf05c42.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-button":"0.19.0-canary.ddf05c42.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-k0deitFqt+kiYkeMoYZ8rKtx6Vro07wFSJsqXVg5dGVSEOPGL5dgoXsT4hNutfpEH5hv5e9rW+D+ZWCvDuV0XQ==","shasum":"0fee8928ba85f9fd1b7d0eb6cfa1ce8e44b3c19d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVbCRA9TVsSAnZWagAA78wP/1m9raUz0ajTp6/mlqhh\noN4b+JAQXAdQOooM72y25XW9msBJsxNSiBFZ8PM/JTQpnfAgw1kvpUkrGaZL\nenrkPVcQ8GiEpakDzevL1aqMvjtBhe5l9nLvA+SvqhfBku6f8Mee7fVynzcX\nd1i6qKKKvvQZdB332sy/sBwanKrtBqac5dxaG3ti0OK2eprk46Y2vAHp+DmT\nDudn4RXNgGsK7uPhWV9lvyOlREWmkoin0LDfUnDM2pwjkoigVoK2EN4u0pO5\nlDekeO6yY3d9CNEd51EuXciHaETwMJpxGUclM+MCGjjl3jFxRMjOfNvwnyZS\nAwsILVKFdIAG6ga/ZwoR+Ck8+big1UGZ8ok6GvH7qkRwcBXL+pwMpBRtlHZx\n2wY9vweyrAzbUKyCYsWteIQ3LtgX8audjP9gmHKUgF2BmXDbDTebnD2hM1lB\n1K4GQUvgMWPe0kB+dMvzq9rtEiwyEfD+lwzMiH7UVcaKCtdwT4SbMLYxdT0Q\nP0VA4ahW3WJT1FOF4AfIKzeoGHJlrsV00YPCvwVzx+6d/2VlYiuFgBiauN1k\nrF5Ph3n4MLlkHj82WwUOX3atU2Axago+5jGvv9xb5V14fceZdEIy+2kbWuua\n1JqHlT0eiARrN6sQFMgT9TjwPco3jjVu/7LdFrr9flRW7qWfCDdGAAOg8HgT\nxBNV\r\n=MaSA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA614Fe5RRWyH808B+7z5CGZdNmF1bnMGdESNYxPwpJNAiEAq1UsXCKRD2LqiD0p6b1c5SjFGpr3fDo0ZL67DT+hIYw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.ddf05c42.0_1599141211261_0.8257974224093008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.b889e6dc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-button":"0.19.0-canary.b889e6dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tJAzx7U8nwMKtsvya+a3ZE5JwXhMZ8/rMgGG1ivnEHrz2+7ZRhLi9E00H/TamQ85c2k2rkbTJwslOkmxcpt1ZA==","shasum":"4a44902018588cb3180f02296b00887374389228","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmZCRA9TVsSAnZWagAAgfcQAI9+xvp5CVD0Me7ll9LG\nalP1IaoeKqn9lFDyL5wAEYSWjYcWSFq1UrTaCfrwcY9WPvhcP/L+VvpnMPEx\nHPwwYjuvCnflR2YssaApMxRqo2cBpTzHE9gMtPbWWu/TqFDe3niN1WoXz2tn\nsv/ICECxWpK8wXUTX25gUOLnk26zcmtrGGZ+S+Y/68fNI47ehkcV5SY5ZG+O\nu9J34QhdF7qbxKUCiQbpdAj2uCdmyjP6lOUYdgGArBq2Fmg1oAqPS4Wos8JA\nfNu38+GmBpvhCEec6njkXqRlnpnSfE/RNgj/3NuNlA0QZ+BsfFqnDZdku/+3\nR5+2PWf3jzU1It1CIa+Q9F/M/GjKlyL5kgRVHghl+myA6HhpZmVCWa7QEca7\n7sqs0ZcPyxWiBQF9meH+UqqnhMxUzvbvIu8kVDWT4HTX88sKMVNsUlAMaC8r\nbI+ZIVEHVgHSo14mevOqi6WphrK45l7Rza7rcwCGbXXBMRQj+l2YemWMayuM\njGpwd+chDhRwykSOpGRGzZT8pwBDr0BgxQTHk7iy19pmJKFkobelsrLeYWRU\n/1+PexY7d569JlJdqpc5kVVtNaJQ5cN59a4sgw7gt2TJ62pXHU1nxLTo91v/\n5nRLfR8weC/5otbnusgMDoGdNXxxVvvc1qnkdexh4Si9TSFPUW+VQNQzmCqp\ne1HN\r\n=XSFA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjOZjwiWq/TWqin+L9KxptKw4PNyKCkbImM+8ID5Vy6AiEAqigcL1aCLS3eV2Pn+D0dMsGnEKrxLBm58RnAF45jLmQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.b889e6dc.0_1599142297200_0.12575341555619812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.aabeceb0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-button":"0.19.0-canary.aabeceb0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4jeaYtWyqAJ9au/y6DyFL0h56Np/3ig0nJF8qjgECvYSpZQeuBiOPt1jR8PQoAumS9hFV3EZtNKB7fJbEuVY1Q==","shasum":"1c2effc80f4f49a646e4656ef9c2e0fbe0b01834","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrECRA9TVsSAnZWagAAf18P+gLCCsDTCULRREC4P8E7\nK4q+S44dgjW9MS7D/394DFJY+2sgzA4KohjPE9VVMxh1OD/D0Qm9ak/irBQH\nIFb5/DN11i4qAYt3JclTYibHNxxyRBDvd+WJUEiucpCepGaJpF1754YTCjuk\nv4CusCkhMft1TdOlg6LatJVvKMn85tJIziXmj9Oa/mQkuq/vsEey2cGrEeMz\n7CeaBFTU8yfCsa+h9oH5Tnj9Z0Ld4rKG9LsokwhWWsqeFcEzVofLheZbxJYp\n3VSgf+C51lNuctWTJPbfQGbfYCaSG0pfOc75dsPxioKhtHQUs9SOrEgWXqGP\nd5/dfYv0+75r3G/kS4bNwISVqqanTvBYB+CNQzyz3u3Ym7sm8wZwCRlpHLZq\nWpbxLRLDAd8wjYiJWRGntEzhiBRoOCae31pvFB1fh92tHzZR1UgOiPhaHvHJ\n46XOvkbMSlkaeP/NKpGTlBLN1yaNqQ0dpW7X/uwfMEXB+pEc4IAGrG0/GM4r\nHhDK0uIv755VSD0Nmk31pja8BEjREUGunCaKTwQdS2REGjGhjogdPp9o5jlg\nNaYr6vMd4kx2+OW2J/zVdnXWkresQu4t/ejOc0sQc/wCBM3GJo2UjyWCxL9K\nUvU28vdQmmnzRC1X+voc6dmqgG+9d+Hxi2JdgulmMz6Iyp3s1ZZUXMqZRhOT\n8LE2\r\n=Q5cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHK3CSxnE7U5h4A+4DnBN/3troliuZjcbOlyIgq3Hv7RAiBMgBt87irrm28b6yNhmBKyzN0hRAN5R3H3OQ6WZ1ObEQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.aabeceb0.0_1599163076311_0.8936084674397518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.911014711.0","@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-button":"0.19.0-canary.d8cca3a6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.911014711.0","@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pFQsMyumosHnw66ymF2XdjPbnpDka4SWLfsBgoPGFLY8LJFcRnR42JV3ySHd/MNEb3T5ENAJ7i+P5MuvWZwVyA==","shasum":"2a1a8aa5581dea8775b61edc2815d38756ef71b1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDLCRA9TVsSAnZWagAArTwP/33S+Can7Q+Xg8ZMaW0F\nvt+29V7gkU2oYBiXAg4qcQR+HocfLvw497Wxkiek/CT8sPpVljGRb8zKDuPL\nVuFVR5mlUaSiS/6cjFn6YrCrZHR2V+4MV4Vz40MVn0c6cZ1CeVjkBaGofSvu\naIFjuhuV2Cy5whoO7TXgGqkOyBOYSZjcaYzL1l/TTqyN7UE+NtZE6l5KSwh/\nIcQatvjYoMpdHDjvoJkgLfBABrI+qMg8KGIz6CVBiH/mI881j6/HPSJ7K16m\n1E3vetUjO9NocDp3WMHi5txEhHOdL/gTfei8s6t/YFeRyHdwzDimSDVxUxC5\ntz4khVoihFuhCoGek7YZvaK7P1VEt+iQ5erMx5PhljB3fxkUDyQCXcgUjOoP\nqAklnhL2wvqhcCxW/9RK2Aey9ffeZcuL/xwY1TD8f0SlcWZxicGu3MPBwGb5\nsR7Lzm4mn+DXkvlUxdHCKTpYU53lwt3qOoWYesNzZPOH2SRBKt3O2U9bDggH\nIL+FLNjAYJ1H0iG+gxmsD2EJgxS7z1jA6dH0Alw+isjxM0wGP7SNpjCq6vdy\n5vTiUCikHWkUZZR1U1yGtUMpZJXPEGN6TpKCG5CXJZhrCxwL52N+5gwtPl+n\nT0QSGvSVqN0X+SX26s8mb7/2eu/pdqAHMN/KOMWYDvbq0rRbmaLA2SyAnmGV\nlT4Q\r\n=ZSJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjfKtMrO2BlTe26MF5p+yvZW7bmnu25DZaT/f/Ne7RlAiBm5sau6QoSQp3IQepIdkEB4OQgSZ/CgAlzd1Gaut57Zg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.d8cca3a6.0_1599168715471_0.6841632828999313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.26d34b2e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-button":"0.19.0-canary.26d34b2e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BqKPCcn3K2OoVKC+6BJEi9DppPg1awC3IPcX0l77zayf15MiwiDyNqWoKZ26hW3tHJmWv9G/RJWiO7OkLDDxBg==","shasum":"4b6cfe75aa3fe411afc1f761572d8042173d7254","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWa8CRA9TVsSAnZWagAAAFMP/jK8wg3ze9hTymUgurRY\n+RRWfTZvi2gWcE8FfjgP1r0aaBuORfKGu8256Dt9/wk7dHyScDr38uXZPkvT\nADH8amkrtZdBNAE8jT+tQBLmO8SL40Y6RxQjKTBJXJsPQ9zW+V0uUB9z7hWx\ng2EUfC/utN1MkJWqwLwyPWze7+Xj46CAqACwGWIxeZEXb3CX45Hn0HRAx3tj\nBVyBGC1djStylVFNWWSiSTflhiN4f3f0lGpI3r1VnK9oDGWUFjIv0eU0lTQb\niKU/MoQnP502HLywEa/MIm1pAKoj3ZGftzyw7RS3uFBp1egTl3QK7Uon3QZF\nJSgNnm3kP1xfzuNPonTE1BF32QCUseH9LrukOvEcGqONVjh0hN9lvOOofZn1\nws3AzYtYwKg3wKtkeMSBBu5vB536h19gNOqKpZgJhdrQN9PLjARBXfCFfjUp\nBub38jy5wD19gaVyHaRBhLgkKbFKHmh3RUBUxIL0fKSx3OfzLbE8hDOp0Ilq\nUGS90A89HtPTNzb0rsjpkAaKHCt44lHNswYqh0iAv6MKdXgSdmyw34ZBgLGy\nRQCzClsbbpc6EzJN6NmzatEjsxDMX6ZtyWRYIfntJAKxxNXEke7nXLFDwoFW\nNAvm1lBZGcH2EE3c72wM4s+G9IOq/AgMOqxN3nZ5t6/5m4vG90nk8EsMEhve\nsefY\r\n=LPVj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEV0x82SQGJMDnCXMwVfg6jIZe1KSeAixQ7jHZreNaGsAiAy3bsxri/hRhR8pktjk6exJdCTnVqlCqBdnxVQXwBXww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.26d34b2e.0_1599170235975_0.6057838851447772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.a1c44494.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-button":"0.19.0-canary.a1c44494.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-klu9yS0xWP6S7wX60AhRiNL+3+7Lfb+OUbiNBqeFGk69O/S4PSfTgcQNzKa19ygz24JtbTF8a0Qk3TdFk/rUnw==","shasum":"161339e987a551eaa920e0b274dd0f8876508507","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVJACRA9TVsSAnZWagAAcwcP/09JWBbv57/bceME7W95\nx7Nb6R9RWhGFTaXX55Zy7sFQKIEV0E9tf37NySr7AKCMDfqgj/VA8m5HCkqB\n1GsyQ6L/Wbf9ijodvJ1EuJC1lPP/oZbrXbdvWGPpaYg8UtnXC8I+2u2ESo/E\nZzyP9DDk6K1VFS8IJVBSTq/QDfPlT9qQFjDOQ8jQwWJ5BD7ayw+mUYSepJO8\n2CUaafiTNQmPk7HJN0SeapqcYTEigopDh9PbFwXPNpMUr7k7sIUk55VWlUfV\nUXzzxIQSBMjyu0vaEPKviCMZS0Ynt99ujGhjqtbGuS/v23csc2gWDmBbsqnr\nX+aTImaSKbmkiO9G4hg3LPC6ASInFFppLhbAVbiCSkWBJIy3Q6mxeIcfc4Ug\n630rqZNP66mRtjfJ6rWQfwyI/pG1qgiXRVVX4U/6uHWJM9x3B/PByul6EnMF\nYzVZxnHNlQAxf61idivpf1zYuX6Pu+mPt0LegDE9qBxcXn1QBcd147QoUBpw\n0ONy95/3zEdFBNwDAOyyUW22pW3At8KPsruPYiQzj8/dDH0t/7t76ZmmEfG0\nxHOzQ05x7nt32hVHy8JH0FsPQAXDtFfjNrt/6my3s916rftFLn1mGT/BNjRs\nXLqyY13Vd/RUaKoM/maDQbKlgNTcsLLo+nb4FR+lWkjKibf0o4Zxihr9I8QM\nHRZB\r\n=2MY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEO8Fg8fQ3NIikrqI1pQrpUDCbG4UX9iBaEJTKZ/HPW/AiEAsfbeab+B7Po4YTOqOGxMHegbzr5O+q6ma+4eZQjpFyU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.a1c44494.0_1599689280238_0.8995177238166936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-button":"0.19.0-canary.be1cd1e9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bLWzTnzI0dUOfsJHq+Ia8Gd9OVV1Yb//555E8cctMpPUNao6y8WfHXcERB15wBJXG+JaS3c++TCgbOtx52rImA==","shasum":"ee2d8dfa54ae37709fc0a6f7640f2a4167861aee","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlc7CRA9TVsSAnZWagAA+VcP/i2lKmZKs0zvoRna+oWx\npulPknBbmgY4xh7nSWpfQFQNvilnchGY5rjmF74pezuzMUOHx4BaoS+ZsCsl\nzA7YzxgPCCUyELqJH5B8EETBSAvI56psC1x42lJ9AcNQ+l1eVbR9l2qfmaev\n4BoiieopzrMAKLixLaxk/Pw48RTPezfeqL4pg8eWFDZnj6l6EdEuESImL+pD\n5PpTqHFWWdu1hh46oZHIJzH0CUqFKNDv5CYNGmP+7UID6ahgltf88LxJHuL+\nL9hBrNlw5bjK3rKLLnJ4pyaiNQvM2d05XsziIrDRrdmCF9tE/G7IxwytBame\nunM7RDZrMaZIeg8xs37iEdZnosf4TnokBEhrI76q4cx7msgM6Uq/Mq8Bp1/K\nu1GrEdmCSz0Bp/auyGYWAcSOlIgN63gfuGHCiXDYVxFMhXYq04D1afX6VpWd\nncI8DmM09oR5zq+1kyvOTaoZli5lRMPJtPr8YFhhkvNepMAwb6mwAOiser94\nhBx0FVJvlX4meO6SHpMvMinSo0qVZ5uonRgZGFuHOefYQTFWU4T7Q50rahur\nLh70wtub2COG7HNh0OwXjbnXbU+xFSt0yxMNBW1aTJHO5bBhfHSFUjvULdVH\najq72B/cMC920wryDRof306Vl7adP+qq5Kwj2d5vDqtm2IbaLrsDjb8FGiPv\nbwrc\r\n=Ywh7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+q2u+/zwk2nE2kHpRtp7PJannpMOwIB2bUHqYxLu/yAIhAJtLkW+R43emwEpsyHLS2Uwagt4RvzKRMe8O5rxsSIUz"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.be1cd1e9.0_1599756090954_0.5108848752979651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.f094c0ce.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-button":"0.19.0-canary.f094c0ce.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WCE5IYEhqDwqWX9Ty/C+y8yzyW+e5Wi/BKoDJdiz1VoamF+0JwAr3+exYhJIwWWyt7BEMvm50wVokUQvTwEcoA==","shasum":"8fb1dea9af706c3389af9f5c34f05ae581633c53","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQkCRA9TVsSAnZWagAAd04P/jfN+qaG3wKJL63aLCE6\nQtYdp911998y45kjgd7OgqVjcY57FuASRg+8UrTdTk7Y3m4zWoxInfYSlTtm\nX3mqkc4aoSOZnOC/6rUd6qSTkZ2Zbzt2x6DxQwJUtomReKNrAyiA57O19oJh\npOa6Ea7bjOiex9J5Ykg2WRuGOOjfMZu/p1faAgk3mDW7lqTSJuS1EY8HUfoJ\nKHGxLxKChsiI9FO2+4B8zhoSkE/3n1CwB7tiNQa65sYiGlNyErT19AweZzzc\nsNH1oOIyUT+Tiq8QQP/VRbMNwzH96F8Qd+SgbvkwC6wk77Ge6pCVJazNAmiO\ntbm0GFRm5U8sr/0/yF0yN45XuxOm4IrAwrhli6Lr6WMj7KOFzzsljv9F2UQH\nMYxQZgi4sUW1LQfINnOPDR3e3nYOzawWrVkXvdbJooD40e0URJQcnIcf4hvI\n61Lsmyw//2FQ6FIpIqEOPy+9dWq9IBDSBSlI5/B25SwZO50MipzEFqzWXfAz\nyTJW6msZjMpZCB92SFYoBrb8C1zN9kcu5v/OjvNYGjWw9eoxZTfn0H3d+RWK\n+8yCQ/shduLUOQx4ftMG3Hac93Sv7/OVDXepKqOFwm/IHr3dMloRGAHHO1D/\njpObyVa6rOxP43w8btJFjs9EE1k58hf4iZ3q6gGIiuSn3mimmtK/agSQEWWR\nVZds\r\n=qWHM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4sZaZTMM5TbfE39/K2UFOUSvtBoTRLEgtKDVriaUGcQIgYsWYALmsdhCV2R9yqlhxwuT4ZLHBOPDWIDBgYZL3jTE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.f094c0ce.0_1599759396438_0.8205005714451545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.c1261e7d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-button":"0.19.0-canary.c1261e7d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LEWuGWqh+InWhD1Q7y0RnfJy3uvIqg+cN53OStlfEbR7foLX89COZQAiXDp3NlXtahwK0S0GpvD0Fd+JaHSsNg==","shasum":"798c681e6e58eb6723b89982ac2f72214a304b07","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBjCRA9TVsSAnZWagAAyB0P/RNdIUufY2sRAd6AGilE\nTGAQcNFWXecpDl40f5MFdg5FjcYYUto7IuZIWzAkx+hP90C5Mc8u4pwabi58\no3MEzOE7Ntx25btln+qMHNlK9oNh7/HfsNwZXwnVogYw8ip50ApumzN5m4VF\nebQVP/H42jsfQKfZ/UJghL9smkEVEfhQMhrsRK1L0MQeReY9nKh6Ws/them0\n3x4qlBX4KD2/Dtn8f6Og2y7b2nUjp83noQS2ETMrQCwkR+pCNjbLgjVEHH/O\n4YYUHfSGP8mSkA7utW5VWKgcNqFA1OYZE1x6fASEtAhTZhSRx7s2uRw+ZI14\nkF8BfWlFKi26qJMaMqjyvQetSBukEwqD/1VvTbydhpnMSI1hYc8v6HRTZGLv\nXD44c6jMEce5awd5kM14Zm5HByYGcuExHo/AQDQ4njkY5VGUzkGi8++RyWEM\noPyCXlzGFpJ+QJ9cI7F09EsUkdIARnXgKAt7cb2XnUFG3qQ413PY2ErKujYU\nUaXjSViTVlA4YQfo0yxEFPvA0YG8OvA7g3oWRu8FD+9GYPBM+jadJnpmUjUM\n4TGE78x26K3NqGXUsMRpEPtOOZLVG/Fk7VviefjGBbLP+oXa0wRHIKhpZNXa\nDl3IT12H4FQbDb22/0ya24VplxhxFegKBby45odFlfUxfdxCAKwyid1dTHQ4\nKaRH\r\n=MG8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClgmkudGoyaqmViSZFZM6WHYFle2Mvm5d5T56OAjpxSgIge3QYTosaVvamVgcvE86J7nQ+YSwIgJoT4bOZGaPrZk4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.c1261e7d.0_1599791202867_0.14300977767329792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-button":"0.19.0-canary.9b39ed1e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xMjdOlWKSHeghKZwowAqAhANnkiHcpekX1EOuKlk7yFYQf9tPWRgav2kyOnFIWN8tEGoU4jhrBQPqGd4wqYlyQ==","shasum":"8b62653f399081d8b55be12489134496b2de24e8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCdCRA9TVsSAnZWagAAwWQQAKAqj1iM5KM3ejTOYrHv\nXBrIVR8giQJdAJUgklHYu6PUUfl0IGyTJmaFfQFf4Jv0PiyJIkNToe/WFywG\ntqUWFSmk4WE2qi/y6D/EEZa4mTjQzZtI0SgAhgL8bsdCu7VhspcM4NWYcnOe\nJvubmNLhpTISJT0PVrTUWfsaGrIcT6T0RjN+eJIAq/OVpsa4eA2kDs2qwpQq\nwG9qRY+pMdmbrMkdzXDeCOc+11xo6wyOwbJzAhzAHAKn3STS2AxZ6F4jow4n\n0/cUzHeNm4URq9VodaKQFuuCPqKjTKNS3g8lKDKS0XX6ep/fVMsrlgMQUkAD\nnHMTVEEEXc+INXJa7vgMmWBOTkgB7DhCx1TUKDhlph+u2VmbUCmoxFavBNR+\n/iQk9Vi6mYqYf92s5+R7hcg+sdVeBvR/oFEqJ/rWcKLnRkHNkdACJQPqhy3J\nPjdpymoz0vwUWIQ7ApySg2lOYQhqgxtXVgd6M7guYXdJFH+KYVkZdaAL2ipi\nFq8Wa47mRmptFfGZ5Vh+F7xiYxshz4oqdBW8WN6RrOKNzlnABneTyvBt4YFl\nViDEQIBV+gp5WpTzsprFvRXPfi3zeNy/ZPNOo1iXWLQlSrwFUtpn0BGpnqif\nLcXC8e1D5i2lBbg/F6SHtlW2CpsGiWcB2GlueKH6/mxKS3iAKZR9iF+3GLVY\n2Gz2\r\n=CaUC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCsFIzZRa0e0JiGi+3Zds6oRfwGIQfWiylLBvFpPEo7gIhAKjjoxoFVFxyz2HM+7p+ZgqwvtlzSWsyblYnsyanHbLZ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9b39ed1e.0_1599791260666_0.3846852419651048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.e67214b3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-button":"0.19.0-canary.e67214b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sHQEeSM9kwtgfOrAeptecVTb68QuYmxgF/lME6bt6Ii0I4eVAbDlVpk10Jq7BfqKsr5W5twyIug2mhHi3YsWzw==","shasum":"858a2ff8a8d421dda38bfc79e9a606d9cd3c670a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGZCRA9TVsSAnZWagAA6uMP/R2GuoNB+uNniug6bmFL\nSkeVRFQAP/IUSbnhlPC+0R1fqiNsR60QfEAIP84buHC11jHraPxg76lg01eP\nkIIbTYqBq3+oNejewJddM/WhaOWXFhCWx4LEglqwLWVdXA/CFTrwyOwVHzyY\nIWxjZF3U7kc/UfGnkCM1Ipe9t636vvD/JG3s4Mz9vLWIytNV/SuBHi1Pagco\njGff2rsWT20hMx9lSq7R/3TZf9JArmZ07T1l6yORMTXMgO4WxGXQwNqyYVwt\nhCGhQmx/G7H5xd28O0uJP210nnMERV+gNHHj+NnfVuKHSqz15Yw/W5RRcVSb\nR8qhIsyFkeR1QOwaTd7JtiGxLvulV2Te+JzOHI+4awrno+Crge22Xf6q3w1w\nf8+PqlSJCFXB3BwWoZYj/QFAGWc8Njn+4wwvWwNvKzPzTaEU5TFcSQIsbpY3\nAEwtHgWajq58F/i9rcWAikbbnCGUBlZIaFy9QJzKN0vyeIc2vHO5ufqAO/Sp\nzTIea13KaHuEAX0Q1mnyruv9Abry8JqELopt0ldS5UOVUgiIzkbG4zxaK57A\ne8tM173vvWEj4FkrraG+jFrVETnHWI+3D4aaXDG7uGOHKtuSkH4TqcGAfNul\nszSssdyUpnVkL9OUXWv/lvJEvcdsqVrUHw+RDJ1TxGba8sn1Qd62y/kiqhJH\n41rS\r\n=31f+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3zP3cK2bpghX2MBMxBZ5+SvQ0RS5/qyt8Sr0SpVkAjQIgOwvD2vgFFXEwIDQmWTsgEs3dmptIMcJ2vTYVEMi8vf4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.e67214b3.0_1599791513201_0.4560281816719829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.36f5da28.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-button":"0.19.0-canary.36f5da28.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1Mv14EQTQ0zMIn/URQGOkzLcY9lVldXzPDwTtMXmHdrlvlMFS1ou5ohfSehRx+wSMzVRGf9+mnCcOYzFrCBrgA==","shasum":"4fd4261c4debd2791a0b166d4a7d20e68e855652","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuI7CRA9TVsSAnZWagAA7NUQAJdjEfhXJrcoEMVyEalC\nAJ1o3+rklk6BMqXzGbeIDT7Q/R1ioZ8r5mmFzKk/NPyht/2aOPFYZQsNtJI2\nPmy4oU/Rukb5HizwUrObWnsDdCmVn/seaSPy/dL8CNL3MekEMQFt5ryH3YjO\nvYLUOr8yL9Nk40+zLzIZJUNfJCbjWHrTk2/zDPByY21JlwlV1SEqRe9JSkOh\npGqE4FAq33syI8Dk+mPZkS2b0dAJqRbV5unhqW6LWtgFGgtGicPdugTRXYti\nw+HppJcBF9yLD6bkrTqQPnJCAlswNEV813osSvchy0gyAaqKVep4cjWtFHU+\nC4iL5fD7rXYZCzKv42YcdRVwEUnioBMrLx6lzUNeICY7QThPromueZ2tKupi\niLqQyH/FUnN+dNdIcSLN7/ihDGp9DN5tGhLIUcZExokoagBAQF9eHWGOkbhQ\n666ACdtnKw5C4q0r7+S5y3BqBdlmVhPCxxklv0cJZQIWMlEwbXVfaxmKwd7M\nHdO9L8c0iOh10tiBtzArhkDS6tp0Y8jeAmnhI1vLaxceihGyqJsWuH2bra4S\njXy64MjgNXaogIdLAuxpt4r67+8bo8qHrYlyCWlhJYz3GYBg92MkSB9Ik+Qa\nhLN4jHzQFO4XHqzf54ywNr4iXJU82Jv3X/nkMUeHQU5dWbNY/lzcVIZ8MCDR\nDaNv\r\n=UzV0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaE3vJrgy5wu67wIGCsY5H31Ej3r3NvzYLOhrb7GCkPAiAMCd7Ykk6I1xdsCycrpK07CwRiRPLx43KWgy8LaIV6zA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.36f5da28.0_1599791674774_0.5519429386632848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.3babab12.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-button":"0.19.0-canary.3babab12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2eW8oOEfpZ6aOVoBetVi4c34YS3WvRbiuG6WKgfov3yhHwwqY1UoKSfBZqTyoXUJS1kmfqUwNsv2VexNEBNXYg==","shasum":"8db794d3a58b70354a33cbc8558a664b490316cc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLwCRA9TVsSAnZWagAAwT4P/3zv19REH2xm0lOkEi5r\nrYvcsRmBhmXsfCPo/xX5qFJ1Pw2SA2QTT3FQlo7AXhUy5n5JgI0aL7hlMqf5\nVxcbEg9Q6B5dZcVCPk578vA3p+CEsoCJ4NhsYQKALCOjlxiKcCOUimZ9kArz\nXMJjRkpDJK+p5J/75EG3XaqXaN3IJZOpKJwOTtIhDgu0vlTYuKOYl65Spej0\nxH315g/y+A8pFm/Jia0Ce+onWm51psKmJUczP7ONCXb+MICd/HryXwJFc/eO\nqkzR3mQzM66lWH8C3myp03CIoA0uW8tzghewMDRcax6FeQU1LFDZlFTuRU4C\nEly8cCqohn9Ariyn4p8J3SLVzKgxnndkrGrcOjByvX7Q1MGK/yBBYbm9ePYF\nDAhjAlsIBqgfEGnd26FxAwKTFQXsAqauXUzFQUOm092GNU7fljWTZQGaVfhf\nbaYeokbbWULj+LhsN+MAS3eZ7PsIaPKD9ZmIfzwbcWqijY+aZPuddg0CIDRd\nhfJuTzJKzniZlbkGq0aW9jibUmSHLfwaEzvBj+ixfJ0G+nj+xO1h22tHdueA\nfTQgSajyZctG/8ZPeexQDN/7uDyGNEqraSgXnAzhv4PvoGUA+nwcj/QRnRFJ\n7MsSa4toCo0fDvMyiKi0Xdrd/6ucx0Xi+2KMlcfaqWkO+wQ9jJuT+SZt8HZ/\nO6hn\r\n=zQRb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1rzVzquPzqr0cxCvS/ZwGo/GvnXL+VfWN/RHkihoHqAiEA7RO7MIN35ypqG45+LMimUae5/dEvG195yOK+XG4wQWE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.3babab12.0_1599791855569_0.9498912757850027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.a4481e6f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-button":"0.19.0-canary.a4481e6f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ecRkaHw52nSc2fao8oqFXDS2qla3wVcny0S1DjGBVjfTgHFTcE+yPdt1t10pI8ZtFi+74IDwUsUHzHvvrxYlJg==","shasum":"7230087d4742fc1c4cd91dedcc75994eb4022a6c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXJCRA9TVsSAnZWagAAtKoP/jVcp9tVUrHzOzMay86P\nlEn/PNaovKG2DHK2PmRazf3n3AdTkNJVMMZa4DJwqB3SWW7KeMvUEulMMT4x\nKzrljdl+y0jBTcojwChzuILX/2kl6vszheS30q+ODuMjzFUmKzT6+zkuhgFy\nBIHP6B9rN3sM16DYatwurgnZiZx8BCxwOqhQdAu2jtibh4GsirZ5s2/K+d8L\nz/GGPBHr+kfWllauvDhpgjWa8ZhwHsOyssbgdsmzWH0/K+PCykxz8KJNTpQ5\nicsG2dvj1qCaDEyOZs/IU8eOzRGa9bsrptnNg824u2qScouLWUJF7DlachEF\n6d7EduJjBlQmfRXev7w2bJOo5W5600mScE4hByMyKRZ0QBsqNDeSBTU+tC/a\nQTYVDpe4N+d+fdRw9sP2Chwnu9QqoGOahd4fsNt2CrboK+36ZcWfI0uHJliB\nGjy2GQnLbEGxHJjwlAB5C1MKUj04TkwZrhe96gxZaM5FXBH63+koYyJdl9fs\nj0Bj19IoHEl1JPnVig/DR9WQBxZ+BsUIcEw95k3FrR2bkKssrqRyimrmwMbI\n3/Y/ylGtW3jIQt0D2mfWzOqsGT0OesOqC1utxahWv4y0NdjkXdUyBtfIcRBP\nY0l5lYp9yXoH2imLRVKqK1yk9VpT9jPkjIRetXS1+wcxbnz9uyAupQmDuyLY\n0K5E\r\n=Mx6S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJNaWicKRNraO19McDHDBLR9ONZ+KJ7d3f2ed0l+094AIgIqv9Lj/x/3Ltf9DNfq7HpJ+b47Gloc8hJ6F0U6oxmcg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.a4481e6f.0_1599792585354_0.05746285826733466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.a9177836.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.744bfe5d8.0","@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-button":"0.19.0-canary.a9177836.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-izXQLNZxxTlNa9oAYsGNhM2kR6k9HpJcLBLkxzifs86BsCctRgyIpU7TOwO0nId0dZO6qH3o5Y8/03MvTFrRFA==","shasum":"4234cf242b6b40cca20ef3eaa8c349f013eb8b36","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hHCRA9TVsSAnZWagAA6RkP/1G5EA1AekzG3eYCU7T7\nmBLtXgBoC6zUHd0Bn9Ozz1zEYVSkEgkCSn+VXmZQOjzuLjw2nWoF+2jkGoH0\nRnkJTbZNuPg2YIq1NUf2qZPYoVob4ixBlR9pDiPkLmkxbylNFwi5H+66cTW9\ngVHHFedOYPOj51XlLd4OokfII0rddIVsUKCbAezUo9rGn2X6KaCSXxC1IOMx\niXrFncgdSWnGkg7ql7Mv4k/oDTc3ik9C07VzSUpIHvpyK97pWdqcX7UlBTuI\n0+rrbI8VipblOnEYRTYgq78wIHTcJdUuV/l/04NdNSPNs6i07gu6FjSBjLB8\nLpEOi3xfzkizG62SjnpPXa5qYYH0TBKoPje3Z9bxPNFjbwxnbudNA7/1M7+V\nY51ngbI9sfavluJ5kxRxCVo4FE/gRXFOjAtlltQYrlfXw8kZCxhCOWmVPbmU\ntBZqKUqCb5eu6ilB/37Uybbfmj9riMeDuC5cKqjVt5/3Se3ywW/CsU9SK49M\npumb/4KX7/tby4qymsvrFJOEajmE77c6HpOL0hZ4FN3mufr1kp7y09xNti2J\np/ZqYeRyJRLZFXd3mkbZARzuH0NxJmgWFYL9FoEjHhSZcchUQIEMrNWJ5Ueg\nJUCkfsXoirlydvUSJnqEkwsLwhcxLqMIrxvusMbAIXZ854yyoVB7Vs5NIxbV\nmK7O\r\n=xi2U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTGhj9fP9P5FJu0IOukecra6KDTaBhE0BURr98FUHsJgIhAIB5cPqS+I+U9N+Yu9cNwhm5JTo/iObgF/fahWExeLsX"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.a9177836.0_1599846470972_0.717486584273995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.b102a3c8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.319bf66de.0","@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-button":"0.19.0-canary.b102a3c8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.319bf66de.0","@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KqhhR3FT3i20TBhpS26+LSNr+zLdWot9G0zasMwBFCKitDWeVsu128LZKUcEkAwAfXlyup2puovbtnEwZtimkw==","shasum":"e7f972da9ff8c3f14a38fefa4923cb570a1c751c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX871CRA9TVsSAnZWagAAh44QAJOShYnDKHzQmWW7USY3\nb9g3W1P8R5ms7cU3v08ljyfaBJYhn2UROE73zXMa1w5WanRc/f3nG88I6zuq\nK6061PqSr4D92F/MMfNfb6ObE1oeOl387piOzf4XvDg7rSKKWP0H43WTfOcX\nLj2U4YqzSrIFtlpYXYCRr2WoYHdsAtiGCJlllrt8RQ9S2NHsRNaKG1OkB7Kf\nwFlWrQKQm2Eml7zqNhRzPeOgY1AAfS6H0Z3WDMA1+lqwzIhjBXwPbJurCS12\ncrvkpS0LGSCwAgu9LXOpTIJiOGrWNtt2lvqAjnWGA2TZZDrZ7prmNofipaKI\nFdMq/w2JWgUKJajaHdN9gXU3FfP9heN4XTBjzvto+1Mg6zyeVcoxnYN6z6A1\nRcQbXQWlJlP6dHDARKVoBWfYxpSQojDQCe0YxUqDZzBJgwXYyVika6mYv3r9\n7rGWDcE+NP9d/ZBRmQKdOfQmQQEPy8felf+wly91LbXFvepNoLuiiJcDxP4o\nIzPC1i3AHzT1EZDjCN6xYv4K32VAmOex+IH2dd5k7I9xf529pVeTosoeONfm\n67T4KrQ+Wr0aS3WbQpEgTZdaJ9hGYKiNDW0f0WPM/C/6fCylKhJLCjnxk2FX\nyDNuOVuyp6Ge+w8Swdzmesi4N3oq5X4vCyTV+rJ5hVQNfUQpSBtlHDvyPa7N\ngsBg\r\n=vr2M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICE7PBHA/7KVfbWHBYr1iydcwXOnRP+Y1fW3k8z64F0YAiEA9qvSTzpOXPJL9IkxpTL7hpNNJ/7GOsd4pTTp4c3Zfls="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.b102a3c8.0_1600114420615_0.5903276687742061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.a7fbc707.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.319bf66de.0","@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-button":"0.19.0-canary.a7fbc707.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.319bf66de.0","@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hb4peCUpPMvPVSWK5C+x7M5HtHetMZ2bF67/TErMHbaylVyXvkyxGm6aUczyTtvdiZ2/PRRUtXiZWgYjEag/2g==","shasum":"38baba20d08a7f0b936a1a34f72d308a6dead2e0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZxCRA9TVsSAnZWagAA2MIP/3hy55CuiuIh+V2pEC8T\naA6tCxFGuzqoxg2XUFtJZWgV9Vj5WaGYcpPmlEFOqkrNP/9IMVtvvGD+ScaF\n/blCMw+ZCJNXFXDfDWDizIbdScoOWr1UmAbhiBdetQFcsyEGC2U2xVVhna1P\n2Sz0Tk5kwmnzqde6ZFdBl94bEHE8fZyDOqv3eGrQcAUeHpC5+bzzalyXpbE4\nMjN8MTVDA0zfyQ67bmImYGvxBjYNCuGFrWqqsVAWRjgu/FgUdwhZsaY/R2+Y\nStgz0TN/SQlINEYGPwC5bfzWk/Vk+6cSWvg8o8wN7ojWjoM88knq7FrDmnEd\nfLCmWC700klUFS+NaVMJctv5uhTYEtEIMQI2NkzguIMaWD9SWKdJbMOEamtJ\nzXWcRD056O4TyWu82zkzL+0UjFvcZTJtLOIcAL42bNVSsHjA0ITawHkDyIdw\ns0Bkqd6VEtn8gSgglFfiI16PzRB5FajPdDmJdrstQOSbTHbDob0wlLh5CauU\nlQ/ioxYxGTCyW1BuT+FINVFBI2yD+1RbVx4R3VVIXyL9vrW0Vqa/Hf/GONjJ\nfEq0A2M4enLhFJNdAs4HiSNSmUXOFUY7sSX3dvmNpdmQng2IInRGnAhaR6Et\nGaeM/qMt5J51LNDgGfjOmtE4u0idmdr41ziyTjm8P8sMj/jAjbTgFArZJc9V\nYSm3\r\n=dPYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1Galf7Gq+QkULZP9gMnpowYRaPBHtR2J5Bga120AZAAIgNe3XJKvVB7JyA1ATuBCYhgbLL5ygvi2yfulhJuJ8sf8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.a7fbc707.0_1600185968966_0.2640802995374747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.ed6b8660.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.319bf66de.0","@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-button":"0.19.0-canary.ed6b8660.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.319bf66de.0","@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0HigwJ6Z7jYJgHaxKBnTZsqIltSaYuQo5xLY71ygJPK8ZoYFqlh4Sa1MlBH4DCpXe6glkt9nr8/dCLtDmcpocA==","shasum":"e6e19d4c6da4aafd6a2bb4ff89f38b8badef11d3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPj6CRA9TVsSAnZWagAASeMQAJUexzy+XLDMYPm1mYOk\nJeVgk8TOJ4gyQS+d29W4diyMWSoJ7eiTymOihvtHB77Deo2JedZXHY3jbiy6\n1osem6O6baYeqRcIfShsglqBlqxLoSRxIuayA0RruE1/Na8tv9eHvi3N+Et8\nFfOn6iCuIw9bAsuh2gh//AhdHWZDlWcVqtrkzzvhSADcl14Y4W1LoNiJ/j3H\n3kpdgBM2pIualpb0FPpvFBe1ZrGWi59rqjkvPBd4K2EFX0vSFWm3qYQDyVPb\nNkXUAsJmxzMXB8n/We+rNVXv0jeN4G+kldO4ANPDWgF2ztsWmUlfmKdYre4x\ns0rDYnNTvD07a4fpOmOxLKrQpM+7UWxTcSJBDispSFPEY2gCxnpqIE2VCUQQ\nBU/F8bLzXN3XjFNOGFF4HI6y7GZ7QPmee7gNQ2jLgsROSCbjEOXeeXAiE3Ht\n78WrIK3rVupoiF7yCrCETWIwrGADiWKh03+ZDu7PAKarnugjWPHvZZ7tVjD2\nzjlnV61DwtfBHM1hGy+dykaQ1eZxIIO0FqAuAtFGdcrQGbfu0Ou2GxjPCc85\nhO/EnZHnX/+wAZtCUb8E9c4L0HHmWBaMfQJ2RK0BF3hdqPg5bsvWQdmDHaad\nGnTDFFhE95BUKapUrbxooIe/NgdpHF4oF2t/b3zfL7+fstvMutmkI4djPgOy\ntWc0\r\n=HTH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDByjfO1w0dY9vXttXAtczQdqYwk82wCRcEIk9FVcs5AiEAuFUO3FwYZWfB9SxFwzcRFnBBlV55KLIxOojkGWUWzXc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.ed6b8660.0_1600190714136_0.9953788629939806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9c2331f5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.319bf66de.0","@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-button":"0.19.0-canary.9c2331f5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.319bf66de.0","@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5zFPX9IIUT2te7Vc0+Rp0xJNNV/HPG6Pi2R7WoYrQv64JUpYAibCO/UIiGtTb9KpurxmwyBlub6SXDNSXRqtMw==","shasum":"84607efb35794afdfd0bbd4267c7fd1f1b64d575","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP62CRA9TVsSAnZWagAAKIwP/3ZOxXh31RN5iMTmriQ7\neStOx1rvBFialuekGQiIXZlqvqnK4vfy3VGe3dFoQl3Imqwl73w3Nbh9c5T/\nuYbX5u5j+byWFjfTnSkFpNiGqznSJelelO+SpI/8IPpACHkv9Z6d3LUEShen\n63DQI5cUued0biKwQ67udw4LLDHojszCCP/7H9jXWZ8jYmJ0r6R7Nhs2Mds8\n0+zzsphS4cF3/SuWqFzILluZu52yIM08Z1d1lL6+lb19PI0+ocOjDjdP8ygx\nSL3hZhfGs2tDgiC7/9KUQFQuguwew9SgxUmo1g/0eY9PmCqVhaEUei5R6vtm\ndQ0DcasfA4Kzr9QnFD3lT7noXqv8tZVtoWmXplAd0DkizUo9uObHCJoT/ntL\nhfLwjqLNsbXk3VpwZ90kz//yMldcXLhXNaOYUR4q+yyf1WBlrkZuxzZdwC9r\n90oCYzvTpSmCys07mHKwWNWuGcLniuYjUyGWN0x2VoQ9cZXmub7gYAtllhF4\npVYPP7cyUCpSpAretVTrInU3gcoH/eyhh5ZjZUC8LWMCnGsfnsmC7rTy2ww+\nKKrq77Fcd6zbkYhbtpYCevVxGhFBAuSF//Tg9//FG2mOeLVC2ljehJHhI1zD\nZ/+1ESmNiDRcPVe2/82nHO3RPhhWEhLRAJm+TROken0FF6Qsdiubr75s5mwW\nbJ/F\r\n=oJ1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNyK2/2465XndIS3zElnQbvCDGStd9nuSO9ycacg8mGAiA9tjQe72oxzsamxWy+n4p8w0HLOk6IcvJrSch8aE/3vw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9c2331f5.0_1600192182089_0.007173298682026097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.63a5f088.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a831d4799.0","@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-button":"0.19.0-canary.63a5f088.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a831d4799.0","@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RYrljQAvTZ4d2irNusGzQqYLyafkMbz4zhSuX1sCQhxDxt5wmRnRO2QJ99I8RJnG0UA/Jkvkv3dtOXHFNs/dzg==","shasum":"e41ff7379eac86ba0ab64bcc1555e2b79e47dc02","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXRCRA9TVsSAnZWagAAALUP/098RGAAacPzIzEjT4IG\nLi1vBfKBXHDiq5dCwo4UMy0p0+kukBkHHmElDm1vgRIOLkSy6o9z8ytkkHaf\noVrUH6d0isK1UKW7RukSaB+QZEOzWvdclcMZy+eSsYp4OuuTMz1YEi94opEY\n4CfNDr8cEh1MjDQa0Hf7g3jDSQ4F9mRr4iLvtZhsorNdHngS6pZfQchIVkvL\nrHVRU4e7kh2sADfJoNLiSrAWoApU21YObrSojZG3CUOjWfK8TzhD8ZDAyw/k\nfuDOnke9xDCbLWfAtIU789LuSnlNTGtFPxuAL/GYjQpxGzvn7NEvaf2YpNxY\nqLvDoIBzykKkOvbkD42IIXeglCdHDrKSPWZl5MbWhCQrI32+lvPfy3CYDzYp\nJJA7LzMVIVkIg+pqs7Mlt7qzpYJCR1u/otwl0v7n5MUrFxsS9+Df2O1crXF7\ntMPIdnmtgmIseDf8+htlq7EFyAbykhaezX3VXwMWoCsIrczRMnmNuyAkIaSs\nQrEXMYJFPoCQdTnGNTs/9uPWTy9qzfrrVPXMGR/hnamJmpKHsdg8dJsnwWX2\n3aef6hHxy9sawD5Wc+kggCVwtF/8fmPSRmSvqbBvyKd3+qy1lbsbMQn/AMA9\n/pm89OAKM6BU3Y2HbLw0u3ZcgygeIJh2+7Y/hOqV8TpWnzJLS4LykfgfsTq3\nARCr\r\n=l75e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBGIx8T1Q3m68syWmAHO/jEoFssfJD75KZIV+WG98ZKAiBKnEAzusaJA5dLstJH7veXlYYeNIa6TZIwipOV796+VQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.63a5f088.0_1600292304643_0.6662276516757635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.b7995e49.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a831d4799.0","@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-button":"0.19.0-canary.b7995e49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a831d4799.0","@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZOsWwYAoZ1D68CD9AhC/Ko2eIs89SAY7F8DjBOaMYssN3oMwxG/VziAlkEyGhyhr3zyZi7SwVOVMxbos5nZMWQ==","shasum":"41c6c8f408b162a9e901342a64c2985dd41f0558","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp9ECRA9TVsSAnZWagAAxxsP/izgNr8tvll69VXTJE8D\nD3NfllvbkTuObg9uJhpiO15ybIZaVZhdh9iu9dxHHmp8vZHr/VcsgS4djpFx\nWl3CG8JNK4hfwgOGEIJqv7tp2CVHC7YjkVMVLowkhJzJjBcYN6TVRFRLhfOg\n5ns/hQrHzb4bU24oqF8L6GaICf5/sw8X5ru7MtDbROsbga/QbyuUIEpYOjRZ\n0TKqXWOPGac3XfM+Yb5iwxvjghJXAwuWtfWGJVzBrpK9DbuM9pg995sVVmbJ\nJteQFWzzuiGMfdSXN80Iyo5DCA9OYY1pkFI7aC1ssv7eE9BFUvEzk5EcVbLg\nRfvV20CfTu2xrpff5fPhsBHbs0/xZbSSW12cDaxPmo0C5NDfWGK25+zkPGgs\nmojKV7XgIGhQmTBoopY/v9D0yEJqLIQppneVNaZ3SY+Rdt6gq2tNfe3iOVoX\nWebpYCz9zc7YDeO90zvMrZJWIyYBCeMa1VxPj2+oo/XDzzBO0HXqBgpIWlEH\nZsplf+10pIq/Bv2BqleN7ZxjfzyojUG/+j9KAtrO0Iypms0/qxTqjs5vw4fA\nnwqYn4uit7+1RABOKhACecR0oE7vFhuMooTKekIX2gykrcTPfOXp2UM83+Ci\nYsL3sJmT8BR5TmksiyDivm0aYfDJQP28z1B5BNGAn3FotKqzWNhYO95NQLLA\nZnQG\r\n=Vqou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4FtNwMt73EiDAvnE/QMzYa7ZDv1D3iIgMnYOG+W5rcgIhAOu53qzFMPKtdaR/Ez08A91EmDLYO/E/DJPIk424kCpW"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.b7995e49.0_1600298820439_0.08989784839103043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.0da3ec97.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a831d4799.0","@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-button":"0.19.0-canary.0da3ec97.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a831d4799.0","@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1y3JqO/b13tnGFmKDxm/9eY2My+isFbq0fXxWuSx+mpfXXmbRfQkruVdPc7lZeIQGqEq24wSPiw+6d0+AMrCww==","shasum":"7eb9bc0a6e33e2f3de92d8e99a437ea4988767d2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSR/CRA9TVsSAnZWagAAGGcP/RH90o0eC+XisS2Q9Vt1\n8OGDpZwjbFiHeeCEXfCioI8+YtqKw50A6g8HC/ML/iaxU8VMsN8xR6Mcf/wi\n8fufE5WSpD4+I2nxb4por9Zz7dg4vCiC5TJXPOT44hrZcR/ecfdtvEs2tPH/\nU0TmYwqmChxXqVqfg6dAaQ182O5MfCj0fFHV9XHesKXnh1uf/4AIXL6jdtnA\ndC6GZN55ktgG9nmX5rDxOvT91E9X198l8MI62lgAS04v7SNtAW4OfhfZJEKd\nI8islA69xqfGE76LzoKGo+TPDohjNrFlZFzInStcMPwR3evWmGwn+1//enFt\nZWvsejBi6cRqM9bd0sAxW/CeLOVNNFApteGm6gSlRj9c7pszKBGwu1Ly4r4E\n0kuI/8QnzPETnnFYlXjBVQ9CltWRcwnsRcIFTT6tljGPzb2E77WB6/GcMJ3y\nRJ+/JTgc0R4jFoShlR0htJ8WGRZwskyVQ5yl0JheI8gD3emu4SsoMmjPdpl+\nMhnMbgEQr6NsjqnRgHMdOsyNjW4wGi8BXw/XSnnt+BNlhCPHiNKMANXXCNfF\n3Ia4WKZeKXJgP+Dw4tPPAdwM5cKEQN8UEqRJzKVW/uBqyd7Rb3C8jDcrLW+w\njCiQ5o/wrhLuI3wK/43l1+qOLB3f73sN0O6lyZIWP/nlHdHz93J0C/dxT1GS\nKytb\r\n=66fV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTvZqS0gsL8nCx8eKnCPl6oD7ah+q7Cv6GjNyr71HgsQIhAJlmclHEa6v8HkW8QIMExulH7Rm+Ej6rDC0IkqYd3SGz"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.0da3ec97.0_1600726142731_0.4477829358680152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.a0793c96.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.4e5c350c2.0","@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-button":"0.19.0-canary.a0793c96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wXAM+Qy1Z+nkgNGNyygSV2fxco1jqhMwHR8zgUmeVpVXyfsaClZnbLWlgHqMynCL2VrVQVbGduUsucxe5jcAEA==","shasum":"5d9ad54667a8c9ccddae4a6c0c3b62de4d378a6a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai61CRA9TVsSAnZWagAASj4P/i2pp33Pm+cOD8Xd3Gf6\nghzLjEVsxj+4OV10ahBavlaMdSk2yE+le8NajdVvnatDZvkH8u5Rt2IMCh2c\n6XS0NiWnxPSW4R71IzWUEdxWNCwbnJKA+fXb96XIdGfIo8UUcDn20V4GOpwE\n2PABNPXguBYSbo0QHLY0FOSGxM4qMjviB91JXNXzJjc0tUXE80PoM8P6Dj83\nPUvqAjeByc+8x+XGiI3IUj58+r0BUwsYk2e+2o03MAjCesN+RIhikQFwwRJv\nSBfXw02PhvR6+d1eDPH1nv3w0lzuYGLT+IT3RbkoOTFKQ5cNpXxqS6gHEW7q\nsgaewXg39Qp1GFIkIle3pUkGMdNlvSzhNP6P92VPRmF8AaY5Xev0x40H1xxX\niUPNz9aqU7pqDICJpI5zBpGm1lSWglZ0XYC7IvJyEwQSUfnoylT2I06L1U2J\nxfvye4TZ1CXoHFTUMkJpoCIepZSNxNSqs5o26ZIetLzQ0XkMID9kfqzKwYHX\nnR7rdLftrNfqgpTNKrRXcgxTB6QZVX7R/gR4k7RPeUE5sKZLWuiWXSCrO24C\nAXHS6texR8O3S2AH9EVurS6JvDPFAtPw8GdiJ8xvdxBwe4YioUawekALizH8\nwc8IkeLSdxGjU9wjZzr/xc/2x0J35NlByyIrv4q+cU9WNwtlZRIFz8HWXKNE\nk4cC\r\n=wXiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSgBpbmIcM+QsQ0ROQ+rvqny5zSTqvXuTZ5j3SZYa18AiEAhlAQnYPKE+uz2xzE408wzFY/AzLtraZG+UqmwpvTK4E="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.a0793c96.0_1600794293290_0.6244368846233839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.06998a3e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.4e5c350c2.0","@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-button":"0.19.0-canary.06998a3e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pVxyqKphGHW6VBlVsWU3/0aMWtPYsosLZPd69E/k1ADEfFvhh/aKAO29zmfaiGG8Ok/UAIoz+NNeXbLXeJbxrg==","shasum":"2f5b0c74c0ff5c7c1ba6b776018f8ba84666a5c3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakG+CRA9TVsSAnZWagAA8x4QAICC0VfVSr97Y24FDh5f\nOyLwWzW+6liSxo9qrDyUX7iVIwyOydGk/705c6JV28a0KExMqXhDgbNt1VMc\ne71995BDCznBLfIUT9IUY8L/VHlm0Ej0vcAQ9GBjIZruJaab28sJefczqY31\nZ3ahuSaFEOXHLSk0Ys1N39c4Gmqlt2d84t/D76qyTW/HoGGIZ6uVA7W9nFMQ\nCHhLoyrnRVcyD8Ic/U/sv0fFk5D3hJilOoya0q6UjoKhTf0G8/zeLc1l4BOF\nKpXHh8zu2tnFK6ZAuCKOmpfQcXxYrCLcWuZeP78mU9a1cOIR7ePzTf2FgwwX\nO1Y6oJEo7Ehe0aTwqbzDTCMwzIF6lbPYLZQdGKEg5/s7Kf47DXyGtwfRXyUs\n4NaB7/e5LQhDMLagXrneUlmDmaEkgS1Y3490sUjXNiOKxMIv40OWcbEgl2Md\ngtu6EKge9G9WDpFRGHNtgYK0JLU//NUGaw7bt5uRRZVhfKSz8S1oh1cYYw3x\nRP4nis8Dp28VtE9urC1xQOSMhBRa6lKGiuwC7HvfXDix0o1gUW7P8ZSQ7LdR\nnr3mZv4TtgxwCiSzi1Ji53jrJkPe+3vzwhqDxYAuNI8pbCW1QOV9pgeaAn3F\nI9qzP/jnrRr7fopYw88A/0Z16M9IwVnmR0EBzORuVsjMLR4Nevkaw0IJAz26\nUsWs\r\n=HAx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChfeoT+02B/QZuGvmiSI3m7JZp/pNq7/Qs0RY0N9QzkAiAPtzBV6bn45wn1cnAlZSlQmZqCoa0LwD+nzU+7qOoULg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.06998a3e.0_1600799165654_0.5548787262053041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.3484a90d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.16c563ef7.0","@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-button":"0.19.0-canary.3484a90d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/feature-targeting":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0DbtcxOb1mj5v9gAkYDaCRGb2Mglm1TASz5IFpYQkpOOViPOx5BgP9q0F+4hd0vqSCa8ZLa8L7JYPc243zPhdg==","shasum":"e46b5ba145acdf7a734c7f87d953963a3c96351f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTtCRA9TVsSAnZWagAA2IkP+wXDW3NLu2vp001xgVMh\nrCdd4saRm6TXZx+4nMtbNf4MwdSTeOAI9+/+IyM69fQ9nxJNQ92wkMLQ8CgN\nXoeECG6L+FUujpgNxqIxl9S6PCEA78WdesXRsU8Gs6lHMClKinFkZiRttgVF\nnFmCgzSenby3Wd2jswwEeo+Yh5QfaD3EqlOanvQZ5GwDsO15Z171JrhA7z9J\nerHSq0LElfA8ONRVD1ovx+dzM4/PKSpTtQu5lm4hBf4Lqd3XGVd5KQFEe+2g\n8b7MH2TIO7sGkTNK3upk7V9kbkeiZdkJLc5YYnnLDXe3ShtQ3MIHk4iHb/sj\nPkMOvO7SL5YsNOS+AADscVth/n40ElVCrVaszFTd3sfPR9OYh1JQltkrrOrS\nKF+mEiyOouTFtCJRCNLpWeV/ug6CE80NkCtXVAKvRNyeriJlIrLMTG0nqf6Z\nk22L1lAMk88MhmggtiPuf1dResOVz75H8t+LDlf1jqAv+wSk6F/SPpEkrGlt\ntVcabMiU+8GskwSvVuN9HT1GTmcA5uVi4ZCaYtQK6sgp/xD2ZgSakvjcf90N\nI0pcImQvibbhzZpmsX7cJKX8E/f8KFjv62ddS7bX9hPCGTueq81XCKMTRXNf\nLaDJdVMlQezINBkllHi/59LQ1YMsdB8Iasiud4eaaW66GM+amvMMaGbGfXam\n2HXm\r\n=7w90\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqBuV82HrJ2HJ6a6dSPM4T1MN0ekRJlkOkaeGAJt6W6gIgRSNBjiAebSfhDsdIg3x+V8fqTO+tLhJ3qZAu4D02+Wk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.3484a90d.0_1600812268800_0.14243455961897622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.3f99af40.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.16c563ef7.0","@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-button":"0.19.0-canary.3f99af40.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/feature-targeting":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YkpEENiZGrwWZOSIHYKpT1cFTF4W4l9qI9DkCguFP3SJFYNFrav5uHN1kE0caymXOvvP65z1RzoqTRUYPz3wJw==","shasum":"51c4b3c9b5d42e8b16919524f9059c1841822fb7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoPCRA9TVsSAnZWagAAXQgQAJoIeukA4ABVZHTmPs3i\nhX2IM2xxVIrHAOfn7ilTN7LWKNtwMzyF7EoTt5DDWj/aICqZiytciFFIi677\n5xAohfsZGQx9UC/AN2SDB2GZIlq66pRyZr1ujb65gTGlj2e4c8fpKLIcT5xb\nS/YNg7djCnHbhsMQXlVsIaAwtX7uHS6Fr+9wzvidXV/U2niK6lDsGD416c8J\nyfCTqxLuqfeeg+/ah0kFn7zHif3vV/2DAFuV7AbjbYshBF86dzpj1e28gkxc\nFi2fUF+MvDKT84OuRtpniuW/9nIV67maU7g4NpUOXdILjvcpJyH6lpR/XOZa\nB1hDfCvFcneGIueo0gZMhYjbMXzS3iz5Rkw7I0z4KdI0v2FcyYQiZ51IlASv\n4lTtZ9tjb0fKnVqrr8Ff1ciH1kWm6L0W8mJ+oZe5wzF6WEyUJomg5jrlpMX2\n9/2hZ07WEZ/i35q/liSfa3S1ozC2iM454EuKtrkbruFWxIoUie3RZjvpYSKg\nm52kry99JAM9HKMhhb4TihdTZn6ZIMcMh9sh75VvoP8OF9EZu0Xw9MLsrZvB\nzmbKKu3ZG0q+BjA30iNQaL7pGrTVffC3E5uhwn+RTWov+WY+CuaoEyVRSlUO\nEGxpAq5xRLc5XugrmPSYVcUrLLA9UrxfysCYlX7+a9JcQTOQEllkja9S8+YU\nqPuf\r\n=12b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFJ7t80eNAZLFZeAQbS1/TnmrxuzNNVJbJF2eM97AhlwIhAJUd05hKsBZRkxJNqe2DP5NqhKtoHOi8XgEiKvcl6qdG"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.3f99af40.0_1600989711132_0.4375490572061074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.72aa1129.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.d4cd83a85.0","@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-button":"0.19.0-canary.72aa1129.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Uq3joJSQEoXix//bpvp8yOXryvocrQAJC8Ng69JaTTj89opl6qjwYC39X20sTzPAg2SkXjJ2SlbDJNWOPoUrng==","shasum":"f4fcf5eac6dd84df4e5930c07f4694d35cec0a7a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwiCRA9TVsSAnZWagAAqxsP/3lziFoE8HyRnGQbqLYW\nRnP4FBHpVO/fUTCCgycSAeB09fcDP97+mB0eQeKccRiOujyGKqSMYYXdjGaK\nH9lel61eMBVkfkDSCqQauBjGOln3Rok/MXqkFYrtOyD+BPAqNQS++Y4K1wSv\n6/kyRUNYCkMLYD8AHTF9K2C2yuxk/G2EmCdgVgBxKEEJOabqflEbpd4aoSBt\nCjxIilR4lsjLcU2s/Hj5+fylRMiFy85ce7wQBeQedORgkevsFuc6YLNGosPt\nKSIq/Cyvi7apwK2c46OnXQCD3haPv3sSidMDn4FE+VMfJdcXgk61+E1Vctx7\nKGBOOetvebYCTjPmOtO17LW4us7wxHZ26Q6uIG0Gm6/lVwSedbQXMIrcA6S8\n6V7VKYOxSFGpF1+JiYrxCMz+8ctOK+otPKkMXLL709c33pNj3jMprAWApJC7\npt5P8WIjHhe4moR83r5cu2rThLYy8CZdZVanpAHjLrdL8mpCYlNaBgfdw2+x\nH3bV6Dx5MeR/FRnJf4owdXTHkXgz3AoqW0eSMYZG5ZENfP+bE57/+o/gdetp\nZVvsEGIMwQ3h0vvKFyJM54Sl4yhRDoaQVj77R3l9LFmS2UyFv1eUqy8qBtmD\n2joAFL3JsYsiyppQMyMD1m4hc/vWMeO/RQgO35jIU7iHyc1aWfeG0kE56Jpw\n83fS\r\n=1AAo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfwj3gX4S0lms0HfGvgOMMEgmeZMNeX2P7qI5zJIvuwAIgGuWXt4vc9fkQ4YjXLVuYi7jZ6bQlYV/AzM39T2c5rRw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.72aa1129.0_1601068065922_0.6328218945794686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.394fd3f6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.d4cd83a85.0","@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-button":"0.19.0-canary.394fd3f6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ED9hlBV2OpTyOBXEZjqhZTXzM9yk3N52E9FMXogICz9OBH05w8PzGKous+sRDK+efODk9kuhFl2Ol0iszc6zqw==","shasum":"2fd1ddaf13296c01b9b35f1d886b3b63dd913c9f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9mCRA9TVsSAnZWagAARZ8P/3kX3LjnfqGGtnl4t+fM\nntZlgDdNBqVVzBq4f7+SpIoyKmyR45WyRDET/7N5PDhjvoUKV1fYHjIf+MTX\nNE7nXiW5XNUZfwjFcTyZBB01gN5bxJqqfqrdjoZoMeASE0rydA1/i3tsNakr\nxqsG4qmISRzeO+El12aEbszD7Rp0vv1b37p07j6tph+yH7cKX5hyR9D1rp+7\nulX5gvukrQ2A4AjEex4L2ccrGvEOn5HT0312sTxfzL0BeW9M2mb6HkqiI5mD\nl/CRER9puoo+hZy9xhdgffr3hNLyzG6cROGKtcU38GdNxKrttG5bRKwDPQKV\nw9KWYe/fdGEnSZH8jl1Gi9y8I/WxR2A570Ord/t1fJC6AeLKiKdax7ZfvCah\nN7OfdwLFHsZc0DRdkZAqfb1aQ1v7t4QJOOQnHIsd9yCCrytYcWvnrBgXMaQI\nW7VX1lHec+LADiqG8BVPXrqnNfi4g3bGhrGtA6+d7bIB2uzthnNi+IDx24LL\nD2rhJULyMSBhL42l6pDmAFzXxoMdxAPFtNNnRb30GD4mrZlA+B+JzbsWkq39\nX6EVJcW/jA+vZbYb7tDSGhYv49UZy3Wgrc7btOHi4sHKNpZj9OFknrGp/aOJ\n50DTcjxgWe82hFxUXGh7/Lrn1lsF7ZZVWdk2r8Qi5RJeWZZfTKfQFuWs9Yze\n+DnZ\r\n=U3d9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELVBW2A9SRa9oQ3ODBPbdpkCBbo4HK9Nrcq69ztgOBaAiEA9plcfsNAjRJEI+z9aGLJRmVPrjYC4Uh6P2Hn4o8P1oU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.394fd3f6.0_1601302374182_0.22873265121467656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.347110f1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.d4cd83a85.0","@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-button":"0.19.0-canary.347110f1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vsMHyv3Ug3bz+PaaCgFwsBv9cjwsp8BKbEKNEw8tNeAc9LJcxQ5u5HLknCOYRDsqUavWy8OskpglWw/H99iZSA==","shasum":"ba58e515a42c1fa269fd6980913540cf43bef41b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRnCRA9TVsSAnZWagAAmw4P/RluKtK4SVPmfSiOMblD\n/gdMQyoF/vxvvRYwyBp5lpcAHtse8yReMH+fPD4dcEErPNWhvzRIvZbBcYin\nHJVbATAHd8NxDoXqNCD8MWLm68ugcmGsWrZrV7DjM8wJXVtBRUmto/rMcXv9\nZfxnv2AMmfWXLIUHTc+8JHCPVBBKN4cro0IUrqG1yXYtyk8Z3aFESYCMKtgG\nAKi9FkZ4R0vaQ1jlNAQGY2IHs0rR7lHBvh7RzEG3/bU1y3rfwZFzL7v+Wp4d\nc658f7KgIxBvtUx3nGdGMIjpaIEhZocvqG2886/0JbJJJKuphBYU6mC2kkOc\nLefB7Xxktejbo8WPJcOjEH9kR/QIKrqYO6rYpxY2pwwNLDYvyqwHXi2mVBhx\nYiLqV2aMMsb2t8UQ9zVFNJpHNr1m7ZBX3nS8GiEYVUv3q8tEZyX4PhelwzDG\n/rx0DlmNhCorJ0Wg2CwH9zoU2HxReaNfFukarfcQ+4kYFP000KKCMwTHxh7P\naNRUSbsNilP/eOZk3oAmxUhWLH4i1Rw/zVUkG7kK7YGNRbQzhIgEE77lzixw\nhxhlff4QK+MxsrUDV8l3M4dMz07HKmAXSaVxZwMAY6eU1KUvU9mCkZWip5BX\nWATH9xCMs5o8qBmWvus0RxvDfcPeS287odsTUtfWVmNo2CquhUbs5SYBaABz\nO1y7\r\n=tIOZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi9w9QD2Y5dnprnk8Xv/kwE3LBuWL4ds52l9ZtD/30/AIgG6C4b4UCEZCwA2mMpcqgUJsyTTWDRlCZBfqxvD8b2IE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.347110f1.0_1601311847171_0.03427168358483801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.5e330bb9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.d4cd83a85.0","@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-button":"0.19.0-canary.5e330bb9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1GBKutbqUheSXPk2aTqljkv/YMqD8ipv7FPpkeStbRYWG68/SODszFplVVdEQ5FcVrrRx5R+JB2TPLZnFitGiQ==","shasum":"c570b85d3c7252a2af0bcd0ea45949a55e18b697","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQBCCRA9TVsSAnZWagAAlAEP/RFcZfV5p8oqMsDDvggm\nqjV5aVtK5qXuKy6+9/L2SwlR7riocAtBbu6H+Q7rDzCkZBCPfJygLSDUEY/W\nISzvbhRAbfOhi9hbhkocHieRPHsTw6EEZAzE/uMSH8WEa7+EmZlsxr0TmzFn\ndoMotKzhCB2/tKEHwx2eM48zQGQhPngNOORTfbwHVrtpDyLGvT2cYw2UV1Zx\nnq++fJAKzXI47mRFOwNpGTOEokLfQSYOSgqfyaJpg5dSwe5Tj8bvMNongAxL\ngaPuhl8rJourj22lVPVvzwZKCDOEw79dMWse9Tek+LZiNcMQoxG6RQOWLSbH\n+gv2YgXW+2oDuPOYkBKoOLeGH4H8uiBG3y0AYZUBOMgeehmO4D61xHUeBHiC\nxIcMpE3czyzAH3mBpwG55h+73LILjpAHAoH1m6UdQGSNVQBxmtjjIE4BPGFP\n+dHTCduj69fQbZCWK3yFRPD7cGoU1AgnW5kf0aA/QXIoq5+4AGBTZNFpq8j4\nwMGf2hoxRwr2FQhGoz/NKT9sJyPDwaLoDjHzkIh4Bdd5MMByG8//afNpRLaB\n3c+ErajhinGn6Rg7AC82w2Ebu42JaEZCGlfcKqTbP/FUhJzzXEym2bQDRKrh\nDtEuFiylV6iLFpyGEPVqmoiU0Sbqvvvkja7LM5xsDqty+n4RSTpmetbbmWHe\nZfD3\r\n=7sB/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDddqHBvhUU9XbUkR24WiIWif6MlTw7OIn3qIkvjHWb6wIgc9iYx9k5PsAHKxqvG167gPqDA3kksZOWZGvyPDiaLWI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.5e330bb9.0_1601503298111_0.984768890739911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38ef4501f.0","@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-button":"0.19.0-canary.30b9e3a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nAQEyjFcy8NFb8oxtBAlKW5UOYEGlT9L/198GlTe7K4hiI6NV3sKWs1EqeJyJFvzkIL8DhauIAaXdrJ83CD0og==","shasum":"c5b465a9b5b8df3858980261c994fa2b7da78d10","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjwCRA9TVsSAnZWagAAvksP/0Qx2n0FMbvwgcR5jCoh\nbjJjMUQ3CYnySch64QUzrtOBigsLldcxaSUMLeO8Urv0qexk0zhDiq++2P/5\nw9QGqJgCCV8YTukiGeuL15Q1O3IKs1QgRtnGrTs9ejW271oB+IxwOwtKYBnf\nbxYtIXi4MlpfAPMbMZbPjqrO/1CPLfd7oVzH2Y9SsLeux1pMVTeW82+w1N1A\nfOJgu5+Oj7GSg4AGUz8tXmkr+D9FjlvOweFIROmkkEWaI9/i5KBO6IeTruel\noCYRMNaiG9g+yeqdLi77U7teoDf8kd+zserv8kTIZCNQrH1XpSNctsBHkMa9\nDarNcpnpvhQBJARb6WL7Zf7gil9dg4Opu6LDDH1/jS1ZQSCR3pism1Rxh2gx\nidNXU1mVqWiD1wHL8yWHYMt389HHBljSbmJpnQ2BFwWgUPsVGsRS0hw2KEw4\nGIrXy0p91gwfgy3tvEAEciUMcKFE8VbtoYweWFUHagmKIQlMnM0ZMq6MR4kI\nDBiz4fV2vhLmwgqR1DYy385dbSRPJs/awsA5eb+MoBFJML138XMTs970CyIR\nStVJeDSMl1gxhA2Xx+Sod+h6YSYxEi5YqjP68uIPA4n61Se384hqV16z2vjG\nCQkQKW4O+ohmSF3AfWl2DxGzPu5KHfrGciiJlgxbPmUeiP9/qzSR4kZ6TZWp\nGypH\r\n=VOnd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC876pJEnQTkXO7brt0cs6stEQqI4PnP36ZRMce/0N4HAiEAkSSbwT4s5aD6CUKtDqql7d4uSEYjkAz1Rom+TRjHVyY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.30b9e3a9.0_1601505520509_0.07680193153778414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38ef4501f.0","@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-button":"0.19.0-canary.7bb04b9a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wYXdNeebv1W3NKueK3VXm/olenozXCrMuSGoWICfTbw+Ngn0E5OWybiYTJERY0Ad0XNG+BJRm+pACpHZLX1QaQ==","shasum":"6e31bda201bbea9be5e18b43fa694c5ce695a33b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTyCRA9TVsSAnZWagAAfYkP/1hoWeNdCF/6HslJsFYE\naaEPFRpRMyeByx88UTTvkexFlNqvQ0KEadvoZrEzfkXeYHBIHdDi8/P1WfA1\nRbYqD/JqOfpHTs13cXWf90OPfJuroj1+d+wAuejc8/f0Qcycutq7KzD50gja\niIwHjuFGaQHT7rKpxx1P4su5vou0pI/h0luMIXuwlMhG3kPQy4BDYp/FA/6K\nyEB2YIM5uEl+vINnifu9WMdzsllFqa+Vv5tfg3rTONoBxLLUhxijq00cQK+M\noZTdNivFn7P3RwcVLoJi8/OqunEhzXAlRfc2FW5ofgGzM8pPbRTNTo93aqIe\njus1/Auj4cUQ1Az0YDA45EiMP8ToG91s0XG+ZzyWnt+N/R02bsyZUjQo/DBN\nU1I505L0d1RxgqbL5PL0OqvHBgkNn3lVfEIJhyP7+MAacos0hkTS+Jx+aSOv\n+lWTRcK823llHv6YDtZ8t46PKjh3b9U1CLyaGDSEqnDylNLa1WI0HkvdwQI+\ndacEfoHRBhs8hmjr4mOvwVzUMHqlyABFET2GVlafSyJ0USgBrlIxD1JlOaxJ\nXVZQQIPENESRmRoFyKJi5RVkc1VZJZapcoYWyx+NYs8nI7h8P7nmDkeWisr3\nVpsR/DdqeuHXjJlQlzGFfAcQg5xsjcHWsOABUW9QYjlQV3fk7OWxBsM1cJBS\n4R1j\r\n=m+Zh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqIK3aQLTRE/jU13n9qu72Z6oAmHZUzTSn4umDjzG/2AiBq4Kux0lFvdk67spjrefb7R5XBQ0W0NIQfxP2Pc0UbdQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.7bb04b9a.0_1601594609605_0.18514478283353486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.615d861d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38ef4501f.0","@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-button":"0.19.0-canary.615d861d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jMV60OQwxRUfahdq3964EZ8ro/pEnjh6A11dcdLBobx70jS2F5rYik66Cqtt5MxVzSSJH6lPsMp1C7UMfkvAnw==","shasum":"6802e1d86da01664be6fd8b3c355785fd3d2d71c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoOACRA9TVsSAnZWagAAg/AP/A/yHRjsbDiVjjoebvGY\nDdjNjENLyIyjAUzfJkwxA1DBjEjXmZ63cLrPJFAWmV5eG3TWbOALQZS3j44K\nCs8v+wbPmJ+cp9v36GEWiNDl/2siBibl2FuCxyLfDng1ksU1EWu1wrAdqKIs\nC3GePQja72h4LSy0VMbXFomC1eRgaNVE+195KUfa1E83vXrHVvLUl2XvyCaA\nhrKQIkJobh/N7vl0aavd7E7bPcxdtzrW/fn3Z1oLwFqkgiEOvQcTlt5c0hhq\nn1E6Pxu3gFuOQKmZeLOYi6Gur7cjByEHVjurDc66HsRZqvXY1Nf5t8gg/0as\nPgv987ymLMzC7DoERpV4pvVFv6dzsPUV9DgbHdVHt7w6N0hAAGwEy57F7oaM\nKNhJk+hqtrKBAZvKmVerXkI5xIod3Xx2jbxYfklY8d0WjOIIj9nWsIlzAakr\nrsqQhz2b+KzDPhL8PBgv9GON2ShQ19J1OAZSWY7uud8/vsD0sEBCq7aiL5Iq\n2t7q7gmWmteoOofz3dXi97822Bvo75FE8V1SL8kkYCLWRh/H3bs22HnDo/0Y\ncHdWW0Wmj+6DCeOnwHbyjIhavQCT4V8PKDmMIgNwTw7RtniyBZHHno1kQ+yR\nJ7n8MZtL7AnJ8ydb8QhvcnPWyc1ZY79lQKA60n80DnmM+N7wDyPhyE4EzFNv\n1p5j\r\n=T8Lm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBH4L9P2TF5FwsIgRwOBqhPqcFVZeBXiBjxV4Lklcck2AiEAhnhJdYepPa6xiABX+2X1g77nMZVDtq3UfG1P2mzKefA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.615d861d.0_1601602432342_0.3472299979334992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.af110e86.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.38ef4501f.0","@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-button":"0.19.0-canary.af110e86.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-5glebLE4nq8iKoUEU4YvWyoWOmEemRMOUM0tQC8curUPYH4z5zc0u2Lkh7ZFEb2wVnfrSEY5zpUdKv4T9Dh1hA==","shasum":"f440de9d8f26d6e8b766e76ab89f23d37821816b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7y5CRA9TVsSAnZWagAAdqEP/Aou7o+BsiPSyobsedA2\nyrd3vIwqT8JO2mbuVplX54mUnqtj+OIgSP1fHNFXR+ALeByvOmK5hZ5PiL09\nVtTt4bmEsvfD2LNwrdKZClfNT9zlFEAPrn8OmeUlgPF+GZsZ4oBqhCg9pJZX\nPWeau9UwHuxZjyDMtt25mFfm9iCkfoUMkfTWKqW3D5dNksa63KcmGSHkopKp\nOAETFoQWKAGTvZu53JuoTQHZw7UwRgHy/UWQRx+PyJU5BmLbiUP7cGk8WJM0\nig7uMRJTfsh2b1vmKOUGNKHGg3N5VKPAufWydhI02wEAqbmvV4hefKZiTSoI\nOlE05Eyw2ioJ0SJ1Kbw230oIWosHEX7prD6QmHHUYpuL3reSpMIp+92Qz9Nq\noVqJhSIgzD+lKjDg4Yw/rUs4xstn6tkNAb4qoWZ8F6ZZ3WTLjWehNYC8tVwm\n7j7T87cwZg0xg1lzGexWRm1X7B4U3UFWOhRvF21ZAktjIvq8ee/EKb0hTcIv\nyHZPzTs5Tf4QJd5vzKp6FirXQonXORYQ79IF9PUV7FMP7b0N4ODg6yjYkgVa\nP3wUI3nQFrHOTy04bpjPHL8A6MSzc9uRFq5Z9ewA1N/zNcEe1pF3F/NqvT3z\nSyiKdnQZYlcRGlivKE7ZJcn88IwjrGZ7QrgSQ3l7ANabZAdqmuDmA6S9nBB0\nYpm9\r\n=y6bH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEz8OkEzV872Sms0s5NOlKNBiyASbaOyaUpyzOiw6+rWAiEA326n6xRA1KiV+0krq07oJ2LS6hGyP7AGQC3QKwNxFRw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.af110e86.0_1601682616748_0.3814164768794295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.89d27ca5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-button":"0.19.0-canary.89d27ca5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lpVmet6NW1JqmKZSp0IsqFIeinRNvI69va9GeStJd8WNmkkQ8C+pdCIeK+Mk7FlcW2UA7ZGKC3CL+d/qf/YdlQ==","shasum":"a6e63427196b85b83a2748504f97341e0d3d4e1b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8gBCRA9TVsSAnZWagAAxA0P/10nSulrBOvWwSRSebIZ\nYm0AhQaCzljI6rBTYBI18Nl5vK8LxJwl+Rx+tIfON87sMlFxy0NX0EYFZcXi\nkW3qaxec6U9tXB84h8PRS3vtGoY9Rs5Ji4ZxBXVEM2cBKkIYvTsNkh9yzWSd\ny6eExDO11PHnNBW/smTzpvlkSnhe/zA69YkkfFnoNPycwB7KOdRK6Iins+CI\n6mP88+4jTP1JUDjIDnrfsr+GkizDTx8qam7Llw69W/6KCOpNrM+4zazF7Riu\n4t2NeFQx52AD2CaVstf5hQwj8J9Fc+NLeVZV8puiZPBjytBljgzXO6LNKPDh\n4a1NSakSMFX58Jyu8/s13YCbMKM3HONR4e0TX4IdC+5+q/X3nlEWK3B1h2i+\n9WEN6wNUkFht98mljPs40Toh3TbHS0slTlW/Nvjbv9AN3LDUVvR90JcI4jAR\nPVWwJLHEjmayUQYuepLQ8KreXcLmvWIIBjRvRbQ7gIFqzGsYJDZ/wa1OoPAm\n8cvEQ4z1Jnv9hzZ3Mjzvv7AJgwh6KQlzuoTkTI3h/5Q9EgrJfl1Bov7dw9Qm\nX0zwv9KjlTNtKHCcXNbQKbx1/C5TZbD0cT5TbzKBMp/UU0wW7peFHjXoZxO7\nIWvz2XBtIu4aCYE0xUm+MYVIIW6TzNr9+FDvIfTsMKWFo506gq6eU2guoh40\n60OJ\r\n=RO/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/a7VMzA/8QuCzualEOS3CxjHhaJzCWcH7G32RJKLstAiAA0vtEwm+/j6FxwN4+xxIQowgJjPXSWXeeOP6DEUYXDQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.89d27ca5.0_1601947649306_0.008876676285985985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-button":"0.19.0-canary.9ef2e7c2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vpYYK03j/rNWfQKYGI7vzDZxA2on1HpAbbTWd38S2SxklUGSQ+1Jwa2Sw35JFKFha7x26iTxHa08znrmBfFo7A==","shasum":"e745017bdbafabe3ed540b5d5ebd4887d9d7c821","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQh3CRA9TVsSAnZWagAAY9YP/0r95tq0Sgai6Xe0gxzq\npXaZhzP+RaBfmyXz+Au8uoF6NT0Xp+b2JeULLuzkT9gAc6gOdTh4fi6nYoM8\nrcMjp1m13Id1M4pFw6xHV6uQG2QU6TdCdVG2x+29ehcFJvxOgcWaVtNxNJbV\n9qNp8bo0QSmNG6JqJZQgk+5HbtfF4J3EI3MHdfSxnmJHFOSSOIuwo13wreR5\no5ZzKNia5jBxetLObr5xCJEtkZVlkJmeGxBrPbpz6j92rVHY+6p5xw0z6vrE\na8iXF4TCVrEev3qKDth2v3JnIaUDWEFx3vqZWbGFosVqKwcFi6Rr9TVbKJeu\nIey729rsfkbX39dlGvsF2LPwoXKc4sbePkO0U/A85kwkCVzcx/BCeKXIKwT8\nZp51jLIYp4Vvt5dkf+rV8JPwO14b6GWMCEVEMphfWVHao+23vujsRVxcoDQE\n6vVWoAZ18R6ggCQQpGHgO1OBfazmLmuHQI0Uk10PV7nZCDBnlwLMtGgnTnR2\nCdQE5m4WwjRUZNoByK7zBHIkNgf2XajKZcCnZWmx8O8RkrrzzKZ4dcmurj4A\nfsW6VjIC0yDTneC70SC65XXTsaZ7sF68I8QxAufhxulxtjbuRI2SPD6S03cq\nQazqwfaDhn1piwPhYpGeqgQQlQ0E8y13ZQIbTOAL5Il3xou6ORk9AjisBV4q\n7Fq/\r\n=++47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeXHEqXXsPJ/VJWMew2ou7wddabX0g156cPFDh3BBkpgIgOxYYPBhi0Mj5attbtbGE8qtJ+L/vGk2wmnn+A+sQsOU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.9ef2e7c2.0_1602029687427_0.14191978297110874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-dialog","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-button":"0.19.0-canary.96c8bdc1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lZIR4LrKazdnu+s2hYQvBpimfQtiCfFcvBhrnae+yoKPZZjd7GKZBq5JBQmUXOSLDELsfFnY3YF8/PiDa2bw+w==","shasum":"3df6a976fe90e8e7b4fe0f7b4690c3dc6e021cb3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiApCRA9TVsSAnZWagAA6koP/1IDpbEfjKjyITdkS1c3\nBHurT78Yvl08tVmRqZh3XdmfHUosyAI+XJuIUvywrcFhhjyNZBMM5pc1v13n\n4GxPgzW8jKVKSCv6YJ61Y3jEpjqvRvxeaPMvsZ6vT4x1b48e+JXwEGp6vlrc\nqmpWJCMTcdpilqPsra3FuoTybCaEMMK9wPTj6c9Kq4E5imraZBCHX2V5USJb\nMjJHJaMHiemL65k6iYb7HUEYxAnaYpHAIl0s2nAGRZVJ2v63/35WJdHifge5\nKLWCyXRE0K4+JVKycBJmEelY1Uzx1btGAaqSwLtIJsxffCeM9pjZeYMPYaHX\nctvACzhb+VdkA5rem6VqPnHe8LcKRNcCA1lpfX5f6NgaG6SyjZlOernZ+B92\n+DVPpzZBSlppXHg8FnY9J3FWMK4WxkjplhUyTIeOHuVN9VZPO2rp8O7UWoe9\n7e6W2bTsqi/hOoUzEf0pCBLalWrR23mk9GlRtkA4Vm8lPsHLzAgBVqLLsc0n\nNO+UtCVMVApui5luEVTlHHPGEuwlgJyXSuoRBN+KXpydHHJY6unykU3uLdQE\ndfgpR74yz17ulLvLunqZ7u9dw/XskLQOMG1R6kqKzMaNQdkFJrAUs7tn0B4S\nqJSdOqNq/lTPRW+kKWaTbkqZuDJJikCyJdrbJk1oljdRCKHZrxvog4cPVjZl\nq9Re\r\n=7SKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHs0/VG+z+LFJLmHMZ3zwE2XT0KfiFMppS1+FcgYQ7NgIhANvL8iwSTRgP8qK5QEFudreybntUrpxzTV+RLPJURIc3"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0-canary.96c8bdc1.0_1602101289058_0.2570829652161135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.6c21f034.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-button":"0.20.0-canary.6c21f034.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-k0rfy4u+2zuqOUMuMiOciJg4kHwivzgMrixP+hkVeaLYHsh3WeL9yfoHLFIkMN1ZxTjn6ZlUrYloe3wdm63Mww==","shasum":"ef04eb5c3460073ef32600d8d1e039bb9c8ee0b9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGbCRA9TVsSAnZWagAAnwcP/0ZcCeADIjhw6VdoQnjO\nEnX5rft46yhvHncjOzVAASTFD2RYFcpukxugskdbxvwj5S4oMxnf4VX0/OJh\n6XhaLxwAytuQJGddqaYAepaZFjAB3fu66UGwyFmvNodwE1yHEOY+ebeCVCK4\nJQ4Q4Re6A7szJyybf0b6K65xnBzB8eaG4eYcz7BIrG6CQxJURPnMiA79F9TH\nNVuTxJ2Fyf/SAVKWmYDZFrFqVfwSE95bKN8jr9LOFyq8oiRQ+f5Ay7Lx08DG\nhlqvXdDI2pWBsnxI/kWB07FRDRuWf6M8r/4I546sSaFf3TTCHZFpVpC6k0iM\nZajNgMu6PBj8gnHrVV/T3WqmQXjB7wBSKNTH24dV1mnGnX7VWGWq33toAh20\n6A4XIx2SnrttwzgcJWz6K+QbWsUEMNLlaPvg2jIJ0kpp9JLwvj+Xw5JD8XTh\nIJYkLJnE4AeLGhCh7MNAyuo5y/zuR6c+yDXPmlf9WrJJmBXhE1SWLLrWs2PM\ntxkPuRnu6pUdBDVI6lN/Eeg0+T8tnllnNedtG3Rhbiu9+QWJxRccUE/J1mdY\nl8cIVTcZLf0lBAAqtex6VGgRyZdu9LftwRbyNvQfMJgQPzuPbAR7RrBkmE5u\nxcSfXdxK4DTYNfNdvEVkbpGUmhTtkWYWiSExv4tWDUA7fx4cISl96Tweuwjz\nZmEi\r\n=ZTwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5JqSKtmbDMDGYmYAjgM/M6EyrgnDw/8Vmc9Mm4xzHmwIgVjqf8OuhiPmLDXt7x4PnQ2pJV4cIlTxHYX5nkir+Sz8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.6c21f034.0_1602109851235_0.6328258880568867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-dialog","version":"0.19.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-button":"^0.19.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-GvIyboZcIyO3vhsYomdhz9jlFIXPrW6zsXu3iDxu6Rgfie1uJlbhfOih2GCGfvctfdPCr0j6uV6APlAiQDE63w==","shasum":"ac5dd43cc2bee6f15ff4bf1b25afbc013a9df047","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.0.tgz","fileCount":13,"unpackedSize":94284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkI6CRA9TVsSAnZWagAAZG8P/0gZTxNlMuwqXYFQhgYv\nit0pYsMuN5l4B1PKto29HGIOO6s8+utiJtlri+tgFSiWx6LSGI8aEnWSIWGI\nUs5tuAY345UcO/SckZ+lGFoUzVs9K30fvQVQJ+9q7weVb1zPHo9NXTEAbDw3\nENn4RZHxXLYW6HUKzr3Fdt9me80kDwn98oH1eh6jpgxqtJz301X6EtbL1rFd\nrANGR1ECs69mD65qrF2Gl5eZP0x/sjrDO066wUodIGrJVeEI885Rad/Gcuxx\ntPvTVy4mjGHxUZZIx+GpCIP7YxqK7ACaVLdPa9KoFp2b0Myce4571iXNmIQi\nWW4wGvCb/LaBApI4pdTT6AtibxGqhVQejFhn2E/g1H822FAs3rgEUH905hmb\nm0szgOCiURNROBjbZ5yEQpELxhKc2stbGv4GCprfLSzkhjKKGb5n5ys1QCtW\n6XHIiBODIVAAGXyfp9vAV+9pbWha+5I4hxQpXQB9Tymb2eJg/NCdQWR8sY0z\nxaF8UNg39TuaClGJNAiEfYGHmDZmg+mPZZXEKJ0ZVGWkjrNPt/DwanYCiR5g\nQiqxK/IdR98/V7QUiELZgqq0VtrNhndWBWgkvV5dP1UUDCNKJXseb8pcH38e\nDD6pwjNgd06Jwwv+C0paa7TfqgxB2Arg+hVWaHlIrTyh9cqxPwVvD6gjl8Lj\nVYqY\r\n=M+AL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwfCmxXl3uZwQQkICXn11nC+woAT2/Uw1S7HUFNKUkKAiEAiKIRsWQp9xQP4ZWYaH/BDFvYUANvzyLx6U9wTYrRn+s="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.0_1602110010204_0.6680829118737464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.1f026aaa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-button":"0.20.0-canary.1f026aaa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-euJ4ZOMf1+K4TwjY+NlRNysY76Z5ytBHiiCG1skK7RSKy1jXrtE341RkpB0wfFUC3J//axltnxxNP8n8ix0VxA==","shasum":"1fbd5f3bd5ac17bce4f6e2b6bd2cbb56a5498f2c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iRCRA9TVsSAnZWagAAbO8P/1UpXFht4qb0JR33OS9J\n59+eNsJ4JDzmCS92g9MjkVzAbtwrrQwf+jxm5QdgODAfvuN8UAyAQQWXHnxI\ngvspERgr+ofWxkIAZVbfF8DeshZzZlcJm9HXbeG5MXgTcycvL9lGVPPT7Btc\nIdm+7txxuLUZpUM+xM3E8p2Yk2qtmed1QjQkzywwLc4SZH/J3J3S/0m5T7c7\nDsaxgLumaGV2PQyrss2HxP0xHZ2OAXqo2C8O5wBYvb4OxvBTnntaBzzehu+i\n0ogKwyZOK2qLTJU55C8TsLa3BWUYhKjaxwX/VDHiMDbr8X06YF5PbSX1z8K+\n4C+agHX3HugfWdCkQPrFAEayMPmlgrPV2q6sEaESOGeGbR0fN66G4xD5mKdt\nVC8yGraO/VbQDxDmUGvhmf1iMDY6KIYGiayWk+QF5PkvwAQKLpd/vAmZ5L+D\nNUcRrcFJFzTn3gH6u35AGLnDKq8d4pImKBGTqGEB3Zu47pE5uPLm/PysmMOA\n5rQgnGKHxLLGOPe59a0PqvtmCldsHY4Zn5InKucRkWoBEZd5d8aTiM7cwevs\nuBllRSbF9gP1fxUfihb6zwjlCL/ElA6T3DYjkJsETu+qTLk2sFA2/xdweJ91\naKTjOEraDd5wgwOmcmNemWY1q0Yv5La8YaKwvhIgpnVZt9+QGzOQguuIB0Lx\nRNl8\r\n=Z/On\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPZL/e+01FBO1SlOWuIubara//tuT3eiTSsn6HTn7nIgIhAOvuWo5+abFORpANmYofmio0Q6QwYQkVmfsR+akI7rYw"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.1f026aaa.0_1602197649167_0.5904106839858638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-dialog","version":"0.19.1","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-button":"^0.19.1","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-vCxXtnTZEmSJFOiv/qk/YFLvvACYaGa/qQeo7Gtk3a7vNvKXfG6HZ9lgVNbg1mv/4Xiu2BvFxjwItU8JjK8OxA==","shasum":"228567e3928fb6e6da21058ba4e6f61683371c25","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.19.1.tgz","fileCount":13,"unpackedSize":94284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5thCRA9TVsSAnZWagAAI1wP/i4UsofpWYA60S6HdGXR\ncHf8bnselVolIoEZ1vG1WcuQfv/iTbkij9ArCFTNLas4pQ31DYwwGgm5ZwCF\nmuN5QY/lIjWlPFbJYEq4iaXzhvyvw7aE8vlYO46Vg2xHKWSyQs9pxTEPN0mh\nlo+R9ccE0Icn/s8VKygRRhwoPGMvSd8ekNH1JYy7MY85Njb6R0pX1hOOIS8m\n8M+oyY8BxNr8LPryPXmTp2cr91SkqY6yS7OTTa1KAetlS3QuKvgXPib9cYg6\nCVe0Yp/F4owauIvPme34HiRlFs7PxNKEVhdB6/+bVzUwMfkNm50Qe4ISswwU\nuXlATgWWXHV+qiy1Tk6NSzaH9IQYGRHtywquPhr+CPAfz55eQ16m6Osa2S5m\nxnRc/qBMIEjOB+LW12aQ1IW/l98ZHKO8gXr6lXBRv7od0QCBfyn8I9Dvb/lu\nTwMMjjPqNMtOcjevplrCD5v3x+UNnLYrvxAhAnmJ6N5pD735UBRJTflzzoHk\nNGlCDe5NTzvtj5bMIBTZwShyuZirK9T21BAGnmvwgFiBMtR9pJxtX7JGlj3q\nNC5FBzNP1mGPEVgZVuEQ3t32pj7lIlPhwG066JnRosvURg0PlJAo5DpnHSIs\n6yiedV3ff1OvtU136hfDH5YfVwdvbSuAPr+sJHz+Bcrdnk2N4IOmP2AjPoBM\nPWxX\r\n=+bhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF3YnNTesQbcldJze6gAfWcOkC1qU3QWJJvVD4Ea7j5wIhAPdDP+V1LQZGxWFo9LFxj9J7PgplU4lqLz6dVlSMXeWs"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.19.1_1602198368762_0.9015938459706598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.5f6894b1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.774dcfc8e.0","@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-button":"0.20.0-canary.5f6894b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-i9Hp/PmonWpBTFsYPP31rTlngaSM1LVYApAx/CfMSCwX8GJS7RdkE+glMAzUjix6C7P082WjrgVTlwYIreSK8w==","shasum":"5b599bb54d1acc3f2f0b596f739612dfa303cb36","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5u9CRA9TVsSAnZWagAAEOMP+wUXLr7XpECiKEkpfRj7\nSrne1YBJWDU2YjrQDtg3dWJadQ4pPFDIGFzFX2IR/FKQP08+HsG/pLW+Qf27\nG0RcibJvdiLnp2alk+uIWzfwAvxzA9nGtIu3gqutMiSoRrRNZPEXFTqC4na+\nNFfHFvi7pkjuT67yEtY3+nZE2gOdkazLr4TMpDL+Qx40CxEVTvwvRwg17AVC\n+KCnSUcbKw5yw3e/aYgYwh7J9xJniXC0nl5BXPqcNevnnEPVTmFbskHWBHeH\nXpj7/nGUwkSmbZzqDrZkSQiiC/VKz/tOukSXoAV1a+XFCkRRC33X51ybx7IW\nVG5De9pAEZrbzb49UY95aWiOxPPj2UhvkTRdAY0kQIElH4A5rM1uWJ+Z9PUg\n58pTxU2DGpHqhZoor/Kkzq+MVVjh+X7ad2Ovo4Gq+/9z4KTfyP4fBQ49L+bb\nwTbBmxw9gLJQVi4qXv1P+7F5+2HZQjgLOeFY4sUvZ9enQJKwizwGTtHtarST\n8FN+ifw+Z9R4m14zpxlFjp3YmvkxbRhq5VhR8RjGrOA3i7lNdLV2gYtDWBUy\n7BYJVZ7cZmgR8c6xtEvSPqVxeI1J6uljuyFBDGNrOQSUmJxkE8E9nkGouc2f\nEqTw4PMCKCChSTBPcZe6+NuYg/ap+AlRAeosKz0KnFu/NrQkdIOonW1O4cY0\n3aFX\r\n=k63v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/YjwPQ4B/vG2z6TX2XlKyUeMyJUVPN/4Gx9NZYGd5OAiEAl13DgBXskGrQIfEU4bShJa+/i8TmOG9GjiLeKWsBXEU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.5f6894b1.0_1602198460834_0.23077931595728418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.f6260d06.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.8a39352c8.0","@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-button":"0.20.0-canary.f6260d06.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/feature-targeting":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-92yKPSBKOQwYYMKnJ3N2T84TnhRebHLZS0pP3yxYtX5yOkel4sMwPtzt8AEbOgsrFNh7Z4MfqE53v/cSZfCQNA==","shasum":"2c1a146c7f2170c36d1159f794e65c71d5ca9c03","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNoCCRA9TVsSAnZWagAAnDgP/3hwB2r5GSyRqk6GD6E6\ngIrfOC+nvkd06GnJVqMmBJ7YzOejGD2Vp/dRZkogQn6dJJYCZ9sL2B1A7FSc\nQpdYPdxoyNKsS7G39amDMuJ4TPRzfOVgvms8umOgkDauCZzeTQ7cK/3sI2zt\nj2McvX/2/TDmlXLAA1Q5458VBx4MIvHmCidaA9+h5BfNsUWacZm3nx8JuHIk\n4HDsY9dDkgIdRZUOmOuaoaPFaSC617EV4L/0BotahRDfiVlN5QsX4vVl0UuC\nfQOSZISaygVFBIlLSoHpFq/62uvGCzqrfSQe0Iavgz5UXYUI96wdudrOWyjc\nHSbQ/mJFfDA+LmK0JRKnA9CsOMtGU4twY3JFKSx4Eg0auM2709VKBIUyfuRW\nbg9NQQyJl5rlDR03VLTTEyHxV8T5KX7DpxV4aXAODhBNqle1LqscNvpFtLRC\nwBCxJ7UKHqZCtW5fl8yjHA0LJlla63kDkJ2AcX+461Smt0KMYQ+b73hDP4Nx\n74GxvaP/Hxxi0/WHKAbRuZm4QRBqT0pHGQN3IEc4/kha/S2erfir/IEwPIdI\n/TU9HvnoHRfGwz/0Z1Gm5/l/NLp5iN+T27Lb7xLyzwc5ofvPDR2DcEbOdTN/\nkBbD6vJdCORrkRvWWQ3Tr8iIXVa6G8k3EpcLjKfrIeFKBilydWiMC7x9P7R9\nZff3\r\n=l4e0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv2jSbLcFgzB8A2TwosK27wpNvnrvkx8tfgYKrZzA/4AiEA+zfrY+VKF5ikK3fZBQa28mXxCNgMqh95pgo34ka+VcU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.f6260d06.0_1602542082224_0.673227156437999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.8a39352c8.0","@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-button":"0.20.0-canary.2d1b08aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/feature-targeting":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-N0jJ3kvQswPvfgokhUIbK7nxQGVQuyfQaVJCJbPru6GHXQ3GMzGYIAdjDZ/NPeEkxLEhENgsLNBQXXAXNtif8Q==","shasum":"3f6bd4b793cbc77237952afbf1df92f78fcc7528","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf6BCRA9TVsSAnZWagAAVJEP/jofAa3iL14u35JzFLiE\n1f3/DLCNwAc+PTEBq+bZeY3MujnzGywvFaJkS+faIXwkLJJjAW+Kd+sF8swd\nTyMY6+kaNGJpoAB8fi8VHafnq3yLenU+H7ypwIYnNa6jcYJQzr6L14Km5nli\nJKsjNSXXL1Xizsub162lBn4bcDdaFkU0ESp1ATRiC05rLjd1MkQt7S4Mf29u\n40zt+l827+9hKhRn2XpMGv8dOpjImR4Q09gajLA4/IQndrd93diB0EJ3Heg/\ndjLbdj3KJz/h8cl+AYTibtGBiBO5kNYtJKuysIQZkZNV4HlXdQz5Dd3KLKYG\nRCYE60kk2tJX9+V50j0MHPjDVDmon67zbZ2ylQ2BA83z4djkhxazJBO/HN2P\n0BjC4lNO0o7CFzPetbilwL1aKljVw12o5Lp4Pgat/RalocdsQC2qhvx3YnSw\n8epG4n1BU7R0LKOVrs6EupPMnTXFDWE14EECw5jjsHd6AIxVLjhdGqt+9INJ\njSIBTTScLs0K2u2JQWIwhBvyLVjlk7YInYm8sIVj7q9vacBvTxLHRZnsEbht\nAy1KM0L6AQJCcEMOeVcNvQ4Wu6e4mdQCr01GibbKAvasWIJw8xYSxcLE8zEw\nKaFuHgvVYNoK6kAuARcNxFAnh4oV93f/jOTHQtpq6G+VPMFSYLciZjF9NGLS\nNIkl\r\n=cvBP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIXYTTs50PGt7vjaDfk9YdTgKprtcJIMX5cIe+EDGxRwIgCcYbpiWopiQzSy/ZGwfqPLXlN96aoK+Kq5k7rNh5mm0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.2d1b08aa.0_1602616960635_0.15569590800774535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.5bd58844.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.790ca85fd.0","@material/dom":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-button":"0.20.0-canary.5bd58844.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.790ca85fd.0","@material/feature-targeting":"=8.0.0-canary.790ca85fd.0","@material/rtl":"=8.0.0-canary.790ca85fd.0","@material/shape":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1WITKNwcKX6TzQZl5Y585XSdJs7o9uPWKTkVvBHj/kYoraXbkSziH7HDxg9AGA64qyjVF6OZ5KuHqEwx2hbr7g==","shasum":"d1a86061a2b56f558c77abf3bec206968aaf7085","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxmCRA9TVsSAnZWagAAJ3cP/ioGUz16l7/8aRYUzkmO\narbrDvi9T0ldqem8U5Dr6RuolnnK9WL+DJ+7PyBBcZR3w1C3YPWNSecZA+1s\nirSg35S3BnIav27Zn8Gc9Uq0uGTs0yXDFMa4Y1z1c+SrB1iU2vAwCOb1FvNL\n/2B1jKTgq/Y3cSYFo30Cd8cYNwOG7JV3lumUGkvX8ZQ69OaOniPF/deIBkSk\nM2HVSTkzoX8KuoIDzlVlj24ZbaV+UK0JYiPqfvomASF5zdrpAaZ6awmpksvg\nFD2Y2o/1qBvfSlVIAMOrUmlPNjCRaYOFopBgBDJmga1Wz84tQ5yJbjs3PGwR\nhxTKLkzk4KhV/QFiOjQPet7ve8fKWnVdiZ21btjDT29x0Tb/rPY6kNMOkPay\n1QXwG3cEbkJO7wLUiLgSZ+LQdqCxiBh18w9hZ0iHw7mHG8ALfeIIyZuY+43B\nRwteONWBJrtVAY/n8xOyaNfjJm9f4nwkcGEB2IBZExM5Sfp0ua3FCanm9xpD\n6drhApiLJYR08itBh89krDi/Qx9xjB15DKQ0AeW6xIYcaHH3hW24wBqD9oos\nlc5fM4GRnV/fZdu9VvGqk4n7LdJGXPPOTWgFXt1z0+jWdJ9aluZzxWIBTPch\nxAaB9jVrLo+qt8OhBuUqu05CRAnMp2qwPI+eX2chgHG3gl8tJ+Lzzyyu4uxn\njdNV\r\n=lg9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfXz2wiA1Z9thnrtWM1WsrdVQpAIG90htWxdJ7NgrifAIhAJ7B7Y8jTOfLl7TUMakLLqJoeACJVV/rop/j5jPcFNxx"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.5bd58844.0_1602632805840_0.4083442951924554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.bc846b29.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c71ebfa02.0","@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-button":"0.20.0-canary.bc846b29.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-WF5ldrMVjSl/HD/xAqi5feFvHTU5waCiPuvWC7fpetYgoNoxzpQ2XTphlzSS+A/U7X0r17e2LsFfR1g7hAqx7A==","shasum":"f910fb471b8da9a42b084b3c9e5e1856c41bab03","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0ByCRA9TVsSAnZWagAAbVUP/0BgiBbknFuLX/gLCNhO\n2ZcxwP5G68p71OkGTqOyzKJnsC8irr7B/3dIXBhR0+oQh5OLsb4dPHJxguFD\nH8i0MsijXKEhopXBanWox+m+v+jGaAU6xjAyxRL1/MqbgDyo2bR2ZMOEyymK\nYZWt0tw0z28c/iWCBOmfBLavWmzadvUzbRbEEa9Gn/4jd4+OcuKMT1iicW8i\nu8B5kqVg3CUxV3k0sSWx5uuVI2RJaQtnlMDSSPzirt3wIvKE514PSYkxv/9a\nyH2qDiFctsCdZZzNTFWvBxVR5J6JTwILXTL8d0SrdzuDjfdARXry4d5+DRWT\npAUp8qGyzSj6dfIP5sARE1OffaJ4SnY+ds5vNarevtj95piTcj6RSNF8zbb5\ngZx83bXF1UCoeNjpniu0zzyJWsbVfUP3wCb/0/F+UXQkAP/45kELVjYQi7Dv\nARCOT796a979V84u8tZoEohEXNCSPiIWgip2GlzrlvhXG2wjJHuSVHs3CVsL\nx2EQeisWVwjRZ8KRJC0dwUTQ5JCcVlFQn58XFqLO4lCResK95rJ6aTdzkMI6\nlL6kjgzcXkDMy9PMmwjB/TNgKVS7mlyPHrUT18DAjdPOXyE5go2woDY9yceH\nc//XNgCbfybC5IG4hr5sXH6Gpoi2T0sn2qJHOSaTo7ze5S8S4NtN/GeGAA2E\npP7z\r\n=bedl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVvPfT2K6/CtbGNNjxOevewWUPCGYkQvGsxq6oIQ1BCQIhANzogCV/2IQ0vxAt2RdCf7iUXlI5QGkheg1P+e+/pVM8"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.bc846b29.0_1602699377600_0.0060440895722779775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.3280b686.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c71ebfa02.0","@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-button":"0.20.0-canary.3280b686.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-BscW7rjyFwuhFsCvmQQbea2mgNDdyLzomOB/ouClGiQfEreyFFQWWJZIZqYocHeFh2qc+tJWcyouH1gemcWJvw==","shasum":"8623df42fc48f10c5a0c7980ac7931642056dbc7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOlCRA9TVsSAnZWagAAlOAP/i4Xow8L5EFRys/RS9iQ\n48XQAAlbR1Sl5zL3W+6jn/yiPLEdLLm6aprAmvEwLjWKSZZxA/At2/GLUMRE\nnpcFB6I8BcWVGbTBzBi/7hf9P+tFFQht8a5mLCZ55qDWTFl4Jb3lkGEnyRIY\nsar5rqLMlfZP4r+er1ULIusDKD1s5+2eGnK88ihs47o8ZqrAGsn11n3+0ImZ\nXsbESL3sZ8aTKlhPZPJnft2NVZPZi6SxqbPA8REnCi9YaoR4/0Kx6A9AEOl8\nyoVfULVO78jvI+iODRCqaruiD24f3Kzs3OFsqDurRizKgSUGzHrBwh9Ax6z+\n1DYwKZlRFLD9lCG753LikDUuYCMW3bB6NgceOCwu1WEEABn/NA2FyzT5HBiz\nQNoZ6x/MuhuSM31NWs0op7l7pa6pEAGy+bo5hfYuECmMhYfJyXGld8ZWPrRU\nYWbSfDEGc2Qw+Z3/cg7bbC0VMKLIvnmGTg0e01Tq4YpB6VEIoLo6dqwaE0db\n4afdmzdqmYlUxHuIAN1iaWBvC0pjf6ewGxUjh5af1esSBymDzWps63QgnpZV\nC7CLKI0Bcj23mGUpduisB7p2QklQLwjf6576PAYUn3Soec2o9KcgMd1WH6t7\nvweS/wwZyeiEFbUtpWr3kpPi9z52wcQBGrIFToBx1USAURNwUubhH0Q12sIc\nD1Sy\r\n=Eqqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEOQDpxjSqkTMMdPYn6ZqNwzimLwfcnn9jBi5B+E8R7AIgTcQ00ZHu5H3wwZFOvh37KJMTsIEPXyQt5XcKTyozKMk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.3280b686.0_1602806692972_0.3966351078559862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.9e94cd38.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.c71ebfa02.0","@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-button":"0.20.0-canary.9e94cd38.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-aEmgu4uwPox8mH/KM6g1ohzH+LYLjRUEvUiDgn9jh0MtNACPMau9W2iRlKLLdK/V3r4EJBFzFHRN9F0LTJVCsA==","shasum":"9102855c85936af65372d18aa765599bf5ab4ea3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1MCRA9TVsSAnZWagAAPKYP/RFMilHaeaazr4Drk4u1\nV0G7r63Q2WAujbPoR4/pvAUKopuLzI9S+4Pjd+GIR8vgiRKzIwLYCULlhCVg\nl8NtlJx70f5k5+c056zn8ignxR3qj/Khz1YEAeLIlsCS81FLSet3dPomm/EE\n0ZRBE6xpUFRz/8va9lFbtkFDDmf3FZE+FQtk1aiYXHxTCWM8V16dxACqLHHN\nGCFsTiuiP2b5P++lFAGkQU+FlVfiP6QFcLUPzs1NcV+0Q9/PgWM3wKKh8yNo\niIw7rc7vqvlblMFs39cGtZXiq+rdMYRKsPP01SXsw9bMrR2qwnwz6xtFVhyF\nnMXv/tgpVoFpWhCAz8+ualld1EYpVylOZ2jWAN76vh2n4V1WXGGXnTkGtbsN\nG6XQ0DRqsPqZC2R5Hk2p2GI+rTK5p/3U894RX7N1p7klQLXjjZwNDOlRp4T7\nMe0Iic48+T2vz6tDqjj9Huec82hwDSyj+9ptBw0m76fCFYT7x4X0+MWAy0SI\nAYBSUK0NUxXvlUgT+54MKLzJiRYJNEWohZQYKXtawKNPDsmRWZh/LzGPi1m1\nnq6S98rVyWv2nvhlP/2ND+9G4ASmZFQHG+G+MbxGalwHMw2+1x9PLg7oLSlf\nvu7NkEY5wUaNHvBnRqHrnO5HR1ivB2lRGBLc5SbEM+T2nTbtjI9vzpJb2ZZY\nMGMc\r\n=C1jB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhDs1PjuPYafBycwoW08J7NqUY7rgwffc5ltZ/mVesgQIhAJTieAJOvDiDjof3iePWMqVLdHgqFivZHDCx1lKSCdMX"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.9e94cd38.0_1602882892512_0.8596713053961831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.4773c773.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.2ab716cbd.0","@material/dom":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-button":"0.20.0-canary.4773c773.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"=8.0.0-canary.2ab716cbd.0","@material/rtl":"=8.0.0-canary.2ab716cbd.0","@material/shape":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-propk4MEB5t/mFHeNAi02fVBDcFCBfxPPUyJLuMHOrIdxDTFEC6v0Sbv/FJ4JlxYi+fx2n2/X3EPv1ixuavf4g==","shasum":"cf266938630d14ff357d5123f43332bd1535e5da","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiiAACRA9TVsSAnZWagAAYAYP/3jYziNHONoocnSoaj6k\nqGcrLOSsRa52gsWQxEPaNfmMxMM09Lo1CG8yq5CcOS3IUfS039KQa74aXQMd\n1L/9VfBW/1XXPiRpbFNrhq1573LTRgg3NXqXtlrBgJAT/YfMYp+C4ZV74CKy\nIoCsQ6AHv2PQgAXppkIUZtWs6FtlhXzfwfoSSZeckmy136kHt0ZeoWYn2Ig9\n7PPG6FWZGk9zq5xdDho3edzJhYIQrSK56M8K7hbbcoDQNFaR5iXLzi1Mpczt\nXKm1h+MPLCDqop30J3SjjtzgIB7y7nZ4F4PyqLRtrIFr7beF+u9YR9FPqQ8I\nJO5zvaMFBWFqa+EHljCqq0gG05JOcmzeuhcUrAjdbXL6XorTGDBc/XElIksh\nL2f8f7NkCUQK8/+W+EHBIMePrLT7RkAqe3VgI+FqCJDrXAka5mmeFQJ9v+le\nkDX9qSLd05qU7yA6a7HAAZRNjepTzeBB0zHv1wkLzOk3i1NzqVVzCEy5qYuH\nRq+YPrrib5DeGhMP3bu5F8XG/T+m1uNMSliAELa9f1FZrU778TfctRlpUrL2\n0P8P26aHRJbxL+CNJQigkwWx+x1R+OnKcz+CW2qUQgqUKNf4mQMa/AJ39VeK\nFCvAIcQfbJrdGtrFGlCepi9GEWwhsUdxq51GlN0G62iW5iGxpMn6D1lRVcF7\nRKsD\r\n=L3pF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwnoKloaR1Sg8Np5gstpZN1J9+jYFyaU7WVydkMqz1VwIhAJSR0Qibc7muW5aEAFEYKQeW60D79s9BgfxBWtzZwkxs"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.4773c773.0_1602887680073_0.3691824369805563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.65787913.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.43c1c5e2f.0","@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-button":"0.20.0-canary.65787913.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UN/Q83EZ1/eDybNgL59JpEkHuMoo7wUsqRbUQtWxDA17w/i2wR668HME51oQ5jaBieBkmtWN8czZIlyjjjpj9g==","shasum":"c23275673633cd98c1f04448eaaf5976f39f4359","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAyCRA9TVsSAnZWagAAoF4P/2D8AK2792WY1zbMkGwt\nBbPgGcXuHfAaAIObNy5boDXQsF2YVttTDZvdlyK8U2AbId8yn3Q994X+/yt6\n5DzCeCl4fxMyz88c4O3V74y17gnqvslJ5a6kl4rJ3VLuayQrRRFpWbgeQtrk\n1Oh0+R9BkAW5oS5IZW4YCaNoCb2CijbEPPyQQ8WS8agJNLd7MvnxxeaFHT7R\n13986Ls8Q9iJo0lLdBRASrMm7KSid16GINpWo57sZoy7V06whRnQxF2RMKg9\nyodGLVvjWFw/jlypFaH6hxozga6eJZ6mjvyqnBEWSMOZnUdOoSNxaijuxvFW\n7NMucTI77Tux+OMD6HjNCqyyBuNgUOLU47u3Otz3vyg3QrQ0tdcDQVcZNiLN\nBW06jiWNhhHoKp0zhFMZDAukOnVB2xkpniL9lX3DOrvJ8N3G8EGqOP1wmw8e\nZ/5qH1h7z8cC24KfTkGQ0HCGuUq2FbXY4IPuxhev1VNnQupU0fX6y0bOIiy6\nCfeoYJvrYFf3lxEQDzYYufNjEdjbUNAETauODt4M/TEG5U+oxV3aZ+wGOp2k\ns/o5oZEF2qqKqXLLgZR908D9W8I4jWkTqQPztBdcxoeS1nCFMluU2LHI0Y5x\nwgiin16xuaQiW4qKG/ijLWDy3W+8z8sakIaTvG2EqdQXbbwjyuZSOiYgWx2w\ngE2j\r\n=Lqgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1+iZ81aeSJfu3Ny2YXvCzf9KL36DRmzvL6z2hexQFiQIgIS6PvGekuWfPY0y/mU3aMDvba1kkhdZVp1jbgHaLWJY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.65787913.0_1603133490119_0.39547220056073695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.5485fba3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.43c1c5e2f.0","@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-button":"0.20.0-canary.5485fba3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-e4VLIbLYFa8rtrSTsguwvNj1QThUgHAWjebcbVzGUGtnEsrn7J1o5pJc334TzWxkn7PI6hdzS5AaA/FMWMZqxQ==","shasum":"a47e34792fb8a8581e607272a3eabe974e0fe43a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQYCRA9TVsSAnZWagAAG5oP+QG0mE2a8KJ6iiiWU29v\nZFF4umnd+Uw1xxkuhBuoJcp9aJFnPKJBO6mOy5qgGTzpfQtWUiMnuzOvGn/o\nvI4Xwui907O9xk2E+0j5bA7fffcrz4FafR9sL0UdoHGnrExBeZX5nCKBl8sx\nP41AajwmPVKkx3Ge8s2fr52RaObYQYCsRx97u8BYG76EGwVUcK94h8iAJmDg\nlwgi2a4XzdQ7ysgLgj79cqySZCYjdXJ2dql3C8/R7Kp8CifzP2d2oxvgh9Tu\nFJq/5FGL4gbY//WzCmgdn6c3AiTiUYCB8jCZJNDFaEZCVDpo5DfT7RLPh15D\nxlHc/0jX3Fjq+683egrOAMUT0GhAArigPwHqfEBhtsLxGiZ+ZFa4PiqS0m+H\nZRcRywODnNTEBGElHTzoVInsMcxpNoGim2ymJ2PntAV94XgF62/BFpHoGX9n\nyi78H8LGM8gbJjs8YdECOfQszgaFsSKf3tyvB6W7sCgbTGHibv5GpYUpSO0M\ngvW+fQmSWlKwGmoA4lVEdDDrkkmuCyrVc28vQxgz6qQmkSxcXVyz0dBVTxdK\nsAWrjOK6XdCe+OW1a50Phf47MnfrBvXowEEy3m2XfcVLczE79VxbiJ4RQmAG\nUeapOqr9PT41kML1vBTpkNacaMOzhE9AIfWg/CdOiMhh1IzV5M/EILO8EQ5f\naQLJ\r\n=XHq2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF77mdxLs9yilh6+iFe005N52g68zUqU4lIZ2miQv+xOAiEAkDAyseCER5sL9t8sQkuaoKmENqq5BlkbshK/HUWhhvA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.5485fba3.0_1603142679977_0.7417291672691972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.a39d0a92.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.43c1c5e2f.0","@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-button":"0.20.0-canary.a39d0a92.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+GkTuv9+VB2AF8uA+Oh+qcYcfEZ+UD+31oi78v7VKKY+cTrHvXSgrhq/4oJiEaIOq9vaongPFcoNloR+9WM2mQ==","shasum":"bb4c464539ed1500092264e05ed2197e1061dd75","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0oACRA9TVsSAnZWagAA0RsP+gIdwpa/xzdvXKm3Cr4t\ne5ylpG1tjWz05dXKbFRAE3MT+nQ+9B+TJwfAjLFZC739Xce3y2HXGK2Pb19T\n+wUDXwmmZ8NUz21hGth5ye6sHjR3HVj65J6IYlVo1t9EIaF0hiarEjTyYAJv\n7EandYGiXIBFC2e6/mPCULTosVPfTqivb9WLiWNIwZ2FUMEw/+9wgggFu3r7\nmGJ5qGH1Nu1D7YsoWaBiwg6VWHVN+eaxsnlPe/oDTkThQjEZzMWI1fTbP0lm\nhxxFm7JhPAG3+nrYBAJbRKhAgK8JNHG/wMTe9xwDEG8cwqypEudnf0HqI2jK\nBxfWlsIJnTCceJksFAC4BrVkwaS59kP28VNJA4F6wwAWZtFa0iEfoEeZPnp2\n9bSFKfxqi4EoRmkLQ/lyY6i2yExMX/L5ZZyeowVckAetWDe3pAy68IY2WqGK\nk6Cg7EBun3oLzm7YDj/3a7vrrMLTRTKF5IYbbWFcgmsDkdH4NQcBigUC6de0\nJ3ZpVdEMktEXsvqbX42uAQNB+ka+YFyAiLm4TwemHaXsMBd36ZY4IHCRJFEw\npfn+Fo0KC5cnZf3EKk3yFk4CZQk7AFTwrXJbaL6HhgMMmpKRV0Fp4rumrnAU\ncSi649dz6HOy2pfZowECczAq2/hRUQKr/t7PEF1Hy+ae6PRpw79xQHda975z\n6wPh\r\n=jtRC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA84Qpxe/vlhof1f10bkq/uGbH2PFTOJ3GMuOKCF3YoSAiEAmmaEFnPivJ2OzZLRbUCtlml1fZyCb6cOjlWZVcbPjx4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.a39d0a92.0_1603488255619_0.07940507166547772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.ccc64eea3.0","@material/dom":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-button":"0.20.0-canary.4eafcbc1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"=8.0.0-canary.ccc64eea3.0","@material/rtl":"=8.0.0-canary.ccc64eea3.0","@material/shape":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7zYBOlMFvduGCpJqC99c7Z2dll+a70xIcuFM7scEAPCHg6mfEOIv2QMq2ZeWHpi3v5SKxgOwex/9H8wuAQikKg==","shasum":"aab7f95e2d91e3627d246aec5e19d95ca9a13ddd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YXCRA9TVsSAnZWagAAOmQP/1tyvStLb7H2GQJSYMqk\nHcuwhyFKJHgHV/SLHKG9tBTixnX0lPFX7/2HG/EKUdwN1HIJAEbFeeowIuNn\nxAGUbWeigyuO8+FGSUbFEKxXb2J/3DH2AQ1XPNabpBT1sXCPwXgbjtzQBnUv\nH8ArBIq+WejvPiYT7OkzzKNtFkrSf+eaXBDhrkDkKUW7UiROzp1LqSixbd9S\nU475yVEKGriY61wC586UqE6p7J+qwOH2S1CEVbSIvkZXM0nbgaOE14tlHo8r\nPZ+oSpVr9I6W5XvTklxxncwCw4wfsimA8r65pU7kP1QkQoxhnpaBsdcuCe4B\nJrMKbhodWur/tb6/hrv2CmvRhpRguqtw29HUMHJdDlMvOvGAOaNejvwZLsni\nY6KjCpLkFBr0oE0rG8AA0z7oGG2KQwBMJ/El6bImYJMWhZRCdN+nKPMsu8MP\nxyqo1EE26wJHyLASDXhp5FhQb4bdTf2ad1BEqsbDb925NijrLJaLe8IZRuzE\nbamEWLcV4Cog4bsLdYDlU70vQofSmVgVmKYrCrs3luRmUyTN6svcjF3a5ApO\nTnoOUvYvD71pAFRuIfQtCKB/Vsp2V/Nn33xboHP/DVjjYGjCCFMzk/jSU+5U\nbWtLdrPvW6+i6OKzpzSnzw3CSanerBFxtINx3zLfw5b/Ok3dsaJbUK+/JkKt\nlGVP\r\n=yucz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0K/Q5RldkcPlrzpi/iN0PtSM7gw+mcKyZNM9dcsrAGgIhALe1tAC+b4HgXgtvDJCFCULUTMOmrziW5IIFRMwG1gbO"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.4eafcbc1.0_1603761686895_0.017008835891843876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.32961593.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a79cdd019.0","@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-button":"0.20.0-canary.32961593.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/feature-targeting":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QMWj7ibaFIcrcfaN/GlYzVabEjaBlRGLX4QQ0rBqWs+kxtehGc3XAcECFb7eXprieWwN1NZqJE3ALY342g5rCg==","shasum":"f47e174be69a6ff674d321def4a1bb63a82559f6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3KCRA9TVsSAnZWagAArv8QAIN4QUWM14zD9FTHjNw1\nL7axLCcger7WZnUKY2jxgCecnPe0hf+JbOniqqqHfUeRF/BirQWeZhHjcIlU\njYiv7X7O2sk1F9uPcfzmFTjrr73+q6EvP3pkPxYbPgCcKr7EST4aLrGcLilB\nebstusgD8XRQ8sOVSfVzjvYMx7QQCifR85l0AUDZ/qGS3iGfeV3ri1Kb2+37\n3Q6IBCWtF1Wn9FsyQvOtYRd0o2rvxeZpHCFkQE/y6yaNtsZXpZSIjTjCetMX\n8tKj4lO18agKUvlkv3YFf3A+Gz2UblN3m1XRl9EEFJ6GHaLHkEoKOtDNUG1S\nIsyB5yIJAurpa70fJ87G/2230AxGmqcXoJgZbvk8syQ/cYbF5mJBRtZc+TC6\nin/ZgDNEaq/tAWIsvv4qdV5JR9PeRvwyRm3bIEjvRRaPk3/Q8Jy49yrbX6ah\nupBlxX0WdIrggcpTs92HeUtURmSzjbzlP6+2AgKQWodUvIsUlBA0D2Vkxczm\nJYrWSZhKvHdb8xG1u41sv4ZvdKIHObl/1m4wEsesB3x51azlpKCl3C8lb9TV\nvwbTT7BMkbkhFJVV1Kq1iVUIdmAoFXhZBdQ9K55FqOaZsj2QJgYTi07XAmrU\nQHr28idJVN7Ki8GOdONvTCN1CjwIlT/vWFAyV+pW8yc34InxKHKwfZREWYkJ\na04r\r\n=jaEp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3HdwFFsaLhF/VCB3Y8uiokmJTDquPbfYNBwitYwYuSAIhAMn7pzi6d4Sf50DhzGLbp8xDB31DxoHYn81MZAcwx7O1"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.32961593.0_1603845578068_0.9034539029091837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.8e3a0601.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.a79cdd019.0","@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-button":"0.20.0-canary.8e3a0601.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/feature-targeting":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-RdGUzX3rkKisiNi4p97QQJsjOw9joufzA3IRe+gdM9bXT7iFvQbdWX3vrEOehyOVfL7xX+1CeHUoREA3ehs3cA==","shasum":"f6c7840ea86256beb44ef048178ff189cb447b5a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYdCRA9TVsSAnZWagAAYc8P/3gmhohdUjYKLB0LEwYz\n1POfiJA8ej+yE6TG/4c6hOjmy1IZv9sjsxCmH36ScJ2RivFk9j/+wx7rrytS\nteO8qAEdZrWdQPWWySRPZkw/msB6T4buHZ6Kjz7a84y7L6ub2Ny32s2U1hhJ\nFFZ19FX8SOe1iQs4hj8igzET8GBzYPtk4FrynsI7M1Ow7eCT+yjJbKiuPRNi\n0EFzUf2aC6lZf6XqkSDdE+weMyFz80C95ok0zqIPFQSSRqkK6dx3UdnyH9i/\nFYxzAh9pchX+dX8gorJcXTQby7rAHbzR2EiFx7o9IYEbNLVbcoMj4WxnZ5ol\nIvApWOEnwCzP/V6qsUytRqkEd9htyapAFFXFwNYqZsK+6d+v+Fir4ke7AdmG\nNzg4RtdXw65lGAhcPD43+F9OLyUUTP5bgp1KLUoCG9a7fr747At4hUT5U40J\nT80GEhg4iXqehFGtjybLZDu2woq6V8nOE+ywKVJfgXEvska594JRgODWRHLh\nZC82Hmc238LOa2PN6jsjOYJglK29r/cvUKUTyPRwm6FpsJFIW3OXJ4I0py2R\nxdvMw06sfc47Br7WYJN13kPdmlDj/2VuCMv7sdW1/L155b22kuwsLzokJoWN\nn+R/ejZd91vskNihFC8avbXc38SN7T7XP5d2PfxuDc5ivRmJ/LWLU2wnyca2\nwLAv\r\n=YNvH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaL73FsHWEpKqu/4hYpb4JldXiasPc9Q/CifrHU000FQIgRQ9hKRy31hMqhZcpix1x1S9AfopkooP1m5lz7GmvwB8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.8e3a0601.0_1604007452747_0.8894592966053865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.178c25b4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6d9648ab2.0","@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-button":"0.20.0-canary.178c25b4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ruipE7LXvpu7EW6qAA436Ow2isGXnepKuimUb3ssYpOz0fnFAqHaSX0eJnLs7BEEX+yU1FZws0K5VwvutqWvZg==","shasum":"5d0179ece42305e75fc6e2b92236d0caedc8f6a7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlECRA9TVsSAnZWagAA6j4P/i9MbhW79AZldZHItPXS\nUf9P4GEj9IGrORNeuw2+AUsrV3mG9gZbqjpUlbQ06G5B1tKgiPgJmLa32Gaw\nTFNExymSZk3+SsTBm55ZApptaTT7yxrBmJadtZM12wyhwf6Ir7gx+ywrnuXH\nFFEaT4A20RhggUoa/x3pgUT4WPOALcX3Jawr6ZcSOnFmtrle/ilV9iYS5uon\nNFB6p4KBetgqaCMC2Z/LfWJDXLIALrLzhY6W0R5JYOIpZcAbte1Y4dye83mc\nVJa9gjili8aL/WIOWZ73HoAFgsxvPSVAqDEo7pfYCl3bhv+uDHVs6Udrmrrx\nLMIRxhtxAI3qkdcxhgGIFdjbCcbKsgFhk0KB5zEFsojdqKttUi9hfGblFX84\nILv9JrCEVd9kV6UUuVzN3T+HX1H233YgFaQTwPklfLEe5OK/VgyP8Gj9hEvl\narQzCLVFwdUEzSUvmWTWFdTFXyIBGxrcB9BcSJWkqkI+2bBHAbSc+AHhTvcx\nRpY6mUzCVNcHe8oluGbpx9mi7FgIWSFIoS0whTsUUL0/qkB+6Su32sGo12lZ\nCId+mKOvar9nGBF+eW1DAJIFmxm2r+uLEnaZlTdF/LEO+8j82JYx2SRU7hen\nzAKI+YCa3exAG3e4mYoVsf6i4r1rIvOitCgs3OpnyPdVHPBqUueI2nWxDZi4\nm5a8\r\n=CGgX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK+vLj+o1bylstZxOIX84Y9TygpesNcv9pwqNFVGxaRwIgZgPOAiZDH8/oc2aJ9zFp8vPn0LMiHeZG297h6lwOodE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.178c25b4.0_1604008260081_0.5382624394497995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.124beb49.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=8.0.0-canary.6d9648ab2.0","@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-button":"0.20.0-canary.124beb49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-++SULevLsuvghcSIKskdhQSoLALRCc0YdPuyRZVRAPlyaocibDKOldTgAC0OBevZrbKo61Rp8bN63ncxCDp/8Q==","shasum":"75d6ff2ee0fcf1d5cc0d0032fcb541c0857c6123","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqkCRA9TVsSAnZWagAAqSIQAIVXYn4Yw96j/jOwTlYj\nDUmf8NRmYpeKJh7Xsu9dcB+ZIhEWFFesjAS7b2S3378aRi4RI6BxkmPyDQ37\nHDCthf/IN6MmvYsBe8eK7Nq/jjf0JzblxZvKr6aWBS3uJe6mv8Svzv4U+/3Q\nrb3e9GwGuvybd8uOE3F2qV/49N5kranYY/jJQjg8hqy1tUTwLrRTq9YpKfrz\nOVfYTnXFwHQu+EYAJdYdVM20sEVBKKvno2/kpJS2zW0aC65eM6WTHDnJWe5/\nXdm+j9IpRlF4pbFeHtQJStyTJ1aa+1p4ozRmoeSB/wJG9Xe0KYkxjlKvG6pU\nJhBgIr4PjWFusdDBg5rmVz8Hp17wgfa93xDeRMVG4ItijrD1JFLxbDezM/nu\n/SQibNZw9mF9603S23EECxUoPSLryYlFIQafluMdLpWT895MxKVtDs1Uasx8\nanlys8LHBnBzuWn4yNPLIpZQ6UFnsrCj3G+C0j+Rn3l1D08M060sqUCOilDX\nyrN4BFz4EUOAcG85dMlKhOX4Dlm63C/hESPy3+eUiY1mNPGzbADG4rmwduAR\nieza6iVZEOyi/NEXYVggKCjsWsI2zaNU4MIBq9j3npkM63XpUZxGcrb/zrP0\nQKz1r33fHkwhcio4aN6WOXQie+FapDspRG01RYZD5rGIDv/vE8eZOuQu4py9\nkm0K\r\n=GeQ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNik3l2++Rd5AhVbBxHnlNOELBaa5ZkZtv5UV//v73uAiAs+ThDu5RVEMrvRjqjQ9KzDzdgTcFDHCZ42xUwC+T2vw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.124beb49.0_1604102819666_0.30197065868222084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.5937f468.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.d6b5cd418.0","@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-button":"0.20.0-canary.5937f468.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7yKokKpY7wbf/iCY6JLgb0hi9Vwul9MI+f4Cm/hZ9SEOGc0vs43gBiQVkfB55XRcdCM6cN1EctlOO/1ZUz0qMA==","shasum":"963379673b43806d060cca7ec466fa1db8118b66","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfMCRA9TVsSAnZWagAA+jgP/AyXUttgrK0IeR7DTm+Z\n8HKR+IQoBiD2Jx1uDbgmkQ3es+jfjzs71rzDkbA0/NK6Vv+NAoV4akyg6R3y\nMfiA9n4uNDnQyTDDC1fAKu78xGAn1sSNQ6jnDxST+zEOVfBR47uXKS87jt34\nSzeXJnHMUDKxTXCCvM3cHPsvNKg0uz8waR6F7WdLcmHzUcKQ1Qy0kGtsP1MW\nZM82kC1kNQJUjt/EZsX9LfiSoAFERanh91l+UQBoOrSxRv89b7k616qDN2xU\n61wsqMKBs4cOzTO8ARU19D9An7jo8Vyh2RTGRLHtnXX5z2RLxuQar17RFtmA\nAFp+SOn4N5bUnEtQkH5A5oN8WxV4zcHwSUmpdj8J29VZ3u//3WpIDrvCp6Uk\nCyKEABm9hn6wEvBqHUkR02/31MaKkCX06JMe9gJtoCDtXXSKf174OAdOfz0D\nE0klcJmt0Iye6W9HAgtMHFFLNuLUH7teV9KMVa/1zY0WomGAHtoY6JyM1dsw\nvbFDIWUi0jCDcaUQRnV9VSA4cISExEPjs82OdxamwGysnL594QLGjZPXqwaa\n4bs5RgyWCcssHSj8HAyI3iD4GFJIK5Uwvj1YRRuTYISIUegsaE27UIc6OCTe\n9/IanHTcmOfJ+tBDgVJG/HqhmXtxT5zHw+OvVKlne4jTMYtJz+ro/IeBigcC\ntJix\r\n=ihJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUTPJ5+YR7oXfPGXwrzzu9IFBVI5YzEwjWwBchwV9MOAiB987XU8QFhshjvsMc9kolk9qLAiGKUSisIfnVIUXk6QQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.5937f468.0_1604523979788_0.9352239831370324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.a9bafaee.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.d6b5cd418.0","@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-button":"0.20.0-canary.a9bafaee.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MT1XgqcFA3jb3TDVqX4BU3mBYbty0wir23vECCigxkPoaoW/xlnt91oThxPfpVCABvq0ksBNCqT+jGiQP48MDA==","shasum":"0b4fc2c2782d177b901589915f8a310f619c81c5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0vCRA9TVsSAnZWagAAU5MP/0ctiXuwQa+ydjA+LusK\nh31QKSvRLwnSwn5LRHNI3Sv9H5sK+LQhzbt3owivRxxhEb+PVIPOB35rgPjt\nwPVzH1LWhB04+zj5yP8NEG5GZ3WEEF29c92gY+PWweG3Uj2YnVe05fOPNepb\nY4Kc3jrIoGChbHTirguANWXT6K+MeJNGwiYIGdZzD9rAhKJF0ghNKpNVXq44\n7JHrvwCM384UNPnPs7XhQ8GroYQWeJ9WJysNnyncuAkWh1cCNycFnQNew2na\nyGUX7WEkhNGa1BqdS5jhv28gPkmUsBSS7N8phcdoT0HRMKSWWuyIMTs1vbhy\n2RYTeQcjycb6w8NNEefNrcMySpQpDwXM2YA2b+Q0jmJxiYNTkpMbpDhX1NxZ\n34m5qQL58kOidgWbVo4YIM6fTGY0AkStpTWYYVAhoeIzinnCxq+EvwrYJqSA\nZvRVzMzJXrCbIL8wVdtocyj0SkVQGlUSxqTAcqMo89RLgqTGTjua3Iuk8rbj\n5pw2ItUE+cvPG71E2Ew7opHHP5UDD51rBRQiOUnD1vUnuh6dTRPOpz7bmo3r\n+FOfVYhtlPigg7X8bJ2zalH529f2Lq6XGjzm8Uh9zllqIPWIVzd1oaByJ2yC\npDVjhO2iZm2PDEAEGK/nejhY4iGGeajZ58aj76F0elbLFK0B7OrHeyZwzk05\n/yJ7\r\n=G71B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs4KWPM4U5LXc0Cy2xCrAFL62J//P4PHzPr5q+iSlwKAIgCvznjkzm5I/gHzd1ll60ZOmZxUmVYgGmyT54c4spTSU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.a9bafaee.0_1604615470804_0.9433811059380985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.184861ee.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-button":"0.20.0-canary.184861ee.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-j8w60yNCCVWRwPcBOpP06Y4+sGq2ATacI9bpgHIYk2TZ343iq0QlbONzLr+PSXkL4rpNXzitZwwAoufrcpWEWg==","shasum":"4eb3e70d606d4f6d1c6c940932990b135fdeff27","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexxCRA9TVsSAnZWagAAbbUP/1Eo4xAH5nj6MwcLxI9/\nCcw36f8OOGRThMJBfb4dD41V4x9Wjk5UoDbgZVu4A7YEetW2eZfB2dAIpAES\no5qEZY8BAmGdRYj16kE9uhLTI8W4ircUl8EnFKHd1TmlQokJe4DLbfwHLAX9\nDGM6ETlDeRic88xgbDJIVJvwfq1hoBPEse/DPcVdT3wS4se0v/bLMDiDR35g\nlfz8o2Gn0eziU5Ofit1EgkIihJE+AMWBhCA5ywY3dCKYW6yyYC4k/OGPrmaV\nOK0M2s0xkLdapLIgkLOdIvo+TSqjMfmBy0IMCN0GPvMGH+uRcwufP5ePo7Ce\nQF40zMYbOjJuePJKLpyox1/Ew/70ddTYM+yePbgITJc1QOCtJFS1n9JbElJA\nD1qFbBRlfweioz/D435kg+mcui2U5XTde13YO68dLu3fVDbcU0n+gdhPdLLS\nbfYdKZ6QTVJL4pWFpYiu+Q0j4EqRnDSwij+kJrAEPfyqOdpuYAiH0BIuEC/Z\nmJulxDeJ8GnONa+f7aEcCU/4z8zUHnoIcK/Twoqz6pTvNlwDwt7YjHgqua6Y\nfcxhJ1knp7IzONw2Hd20TwkTmZSScabJaMesAPM3XqjFpRH8hW30H9PWyrNi\nt6kkCoY58WWsuqt13O3U1kpa6+gioysbUs4YaxJaPK/3X6TdGDNJEPUJSJnZ\ne83G\r\n=2fD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0fyBdTjNRTpQeSxCSTFPFKQwHbCLXa9HfVxKQrgOligIhAP4l4WdN5A15WMt2ryImoPJsrNL2zm5GJsoWUCBvDead"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.184861ee.0_1604709489242_0.9031680041196852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-button":"0.20.0-canary.6c6ae2d6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bXxIowZvp5t1RLaqyqzG/TzCBVJeAI81lCltOBUTjYf8CGwTdcTZnMCyc6CBXLly662GVbxzL94mAGsa7YopEA==","shasum":"4ba2948e47c66db850edeeaf61cbf6ea8822adc8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7MCRA9TVsSAnZWagAAtA8QAIeBkeAMX/cV9CWDEMwv\nas64URegGLfjHJ2V6nzTywl0d3n7qLD4kT+Bho94vEVIYjJ6CEMcbU9pOYUu\nt6KTnJpZkpf0biXsGMS77eyMM5skxDGKfd6ATdHoWEKkEiB9wItVrVO2JWZi\ncfLzthNMiVPfEBSso9LoO+4dM8+7wZaQn0nzGSV96vthCODBmROhdAnlN1GH\nyfrBJp3f3v2Y4nEFVdZWCX2iWXmDoDCYwomf6lxj5tfIgHiQCrz9VoUbrzDn\neUlrblJMAh9Nm/jt2XqmCayf2GzzqDIIeHAVSYB7NlD7seAJR73Jf5/skBkY\n0c3ueT68g1Jtn5v7lq1NeGGjw0LDzVIx1hF6wxXa5vh6FnOfIkS+cnLFh0rR\n9kUU3LLhU6YEUH8EeJQOVwlRj4h6FasTvDMencDSsAu8qphlj2j3qAqB7V2q\nq7axQgfqB20mTE/Opr5oRhfOf6gsLRiglKVaFK3La1az7MQ8FwLoi1m069pw\nIOmTL8WRQqu+kgc23nhQMPcpYwxl5eunnX5D1Ez6zm8WLV6kjXPdhsF/zKK9\nHZ8k/SOHKA583yanS//0GnrtQL/JDNzGkhTaXiDdg5Gg86qSEOi8IBffUcou\nqAv15p+opme3IGNmddB7ew7yzIKhqN2v6myyNylD6np+RpWFbBYgTZ6YT6Ps\nS5zL\r\n=/BYk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZd90p9IxKE0bhLpfhyMFjYaGUQpqmdTQmAHCa3tc2FAiBG1yjzlfqEjJjRtVHTMwI8FQf022A005glRNJFs4cGmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.6c6ae2d6.0_1604927180209_0.854274098257864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.ea2aa477.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-button":"0.20.0-canary.ea2aa477.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4R+Qy58S88ovV8LPIKqL4LwyEYFLtpkw9Bn7JXV3OAqXaTfkPotGv2APWXhaVExKUnWPKqws/flzWw3mkvwL3Q==","shasum":"01fa0af5e2e8d3ec9ac40a2d52a7171906b1dac8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdegCRA9TVsSAnZWagAAGgIP/1lh/EGNNnmd1u69DQNc\n6IRgkaMR73DI6X/WrVVUFJ8SpPqr5/njIoemwKLVzsgXvnnu5qwf5+U4AUw5\n3BrgsRwhttSrKpzh2JPX8D38rFvM9n5QwsR+n97f7jqo5BBqQjYNYuLPpeYY\n9T3AY9yJYunyGXu0q5XmoBcfq3fmrtJykKbdddJk/Hy8a/LodJ4eJuZfjZSb\n51nHjKWZO4QzAHi1zpigGAAKRuAB+6AocvQILDvlNmU0viP4C2vIIw+U1xz2\nysOiVkwHQFpP1wfwSBjmCOlTNayev1iftvvHMeVtz0hshRMxQuAmJfsNj9MJ\n1yxHmq9dHJxLnwdGa97TsLpUro2RetoFboPxcfAoV1iBE+wstl3PBnnR0MS5\nj1JIAIIask+NccOHdmRLO6fyhvpA6NDGVDiljrgRfUBt/vbjA4PuFuHuh1UX\nG54zRpNRdWT6if1RqRze4Z4rwi49+1Ie+jjxu9rKNUF4NA3vvhnNmLX0wkTG\nSQuFk2KQLQSxgNVJZlxsfG4PnX4dF4QSgdwsXU7HdkFIQXql7KrkAD2GaPu5\niVB4h/i3gEPHiG8BDyTdNgIznrsQ+zGKjyUXqGcrFvuF92bgHx4XuP5hS3jG\neeNjDtKl0sfr6+AXbC4t39m3wy4DKoNeU6xtaNHfMm2QwQFdyD5f/KaU3xef\nFc/1\r\n=RuOE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0RVGnn8LINr2EDnMt5bXxpTfEGj2n3XvhPm/w41Iu2AiBuIzZeZD6uQ5xB85HuS+Q7OoE8Cf7vwglwlzAAZjd+kw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.ea2aa477.0_1604966303814_0.0940159466053152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.a2c088dc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-button":"0.20.0-canary.a2c088dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p/v9gcpvqeO4c2B4PK8B3+ZsZyiiKqRty7Abl+w1b/B+wiySxH8yBfcC/sBWAWlirE1CuBCOo5uQnzxnbjb28w==","shasum":"47a60a6bdf9399c9e547fb0382f79972ddeb3bad","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKfCRA9TVsSAnZWagAA3fkQAI3dA1FZ14HnadwF4BjF\nNp3lYot/0ny1TSaFw7UXd9qchwDl8czFs7UUeEyBWUdKSlR3TuoxpZsL8L1h\n5B0jWQZZKb9FcQMRG47+019RYCDk1j+zVLnywktbx/u89f5H/jccneQWP/R3\nQYrUUxU5xU76ZG0hwbvXffnjxLa+k7o3xSLGkN+ipoBF216vNVKAx/Dstjrw\nbASKRiYkFAKvCbHIR3EFhecR2jOCY1nY5ZmmuKear4xVwd5ZWvOuii4M5Q+V\n70gOobHjCuAa0+ASjCXzMKx/PZCSVX4BMbyx4DVqxmdnZcjQAII7hSg80xSq\n32NY9RwQ+XX8XtxohR7xf/o7RdBKne4ojkiomNMhXKte+bASYmIw+EKv/6l/\n6/ZKzApWIFI1UgzXoHjjouFSvipDF3awY2FwfOvHFKx6Mfgpl+5HtavLVon1\n9EbrdNoaVyqeoPXgv9AYffvpx10XlEWK8ZOffp6SRBZwNjkMHEMMW5cppM1V\ndr29gSh4tL2ICsUVBiZoj7nyu0/gnUt8mdArhQJyvm6E+TMklgGfUf4AnaHJ\n3E7v08rm0TN3quHcrveoBs3BpqVTKNRD7JyNU6NGYDnp045e31m/3Z7rq0wb\noRlqq7rl+NwAeNjX3TWpBFtg4NJLO6HIvQfgpBuV+0z8B+jJb+Iba8atPWnl\nCguy\r\n=/90H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2n25f5ffa3ZB9rxgpWpJQgPTcXgf1zq7u0f9mtoRpeAIhAOyyB/dlwdFtZYgQCO/9fD9LB13+WouOpoQ3VtPs3GIE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.a2c088dc.0_1605018270929_0.7645375852588219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.b04d71d4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-button":"0.20.0-canary.b04d71d4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vRXRq3GIAZByRw6ZLMxPI72W1iQVPymGu2UmUOmJLAmTClZ2vs2jDixhmJ+pltDU/3n4sgqqgw+5mnz8SuM8qA==","shasum":"4f39552eba13f1aee08fb42eeb5d84bee7b654fd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":94336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGUCRA9TVsSAnZWagAAEnQP/2D5YbhlLPw1WhIYa7xL\nWDZ15KkMisObNjij4NgErNilZC0PeRYsLGZk8uR6qGDlAZeNyI9aWMZbMG5x\ny49mFijDpS85KABiWqcRQZBdCA+c4mBu/TPMpdmtCax+8d4oM3bEHyVQzgBp\nf9FMjjNToyXfnbqc+FM8Fpng/C7sj4Okg+Bm87ZAxjrHmYTJjA2lF11xBSS1\n3FsElCSlGC/CJemTNlnthA13YePgcy9alkHsNadbM9T+kNY7/jLkBNvx1BzD\nqmaDdpJGV22u3GQfM+9DUFqaLQjWvsA3kKeeYEZYomG7nfSVpINSOuSRWu4v\n8ow36sx75Hc2QuSU0co3pB6QPLJQJ5rwsSq9o7r8hH0Xrpyg1LF9Ur8Wk5JD\nXOpvZc9FHTAPOMJoRj1W/myF4eL5lCdP3yWec+1YqCDdOZMsgnU0puX02rsz\nSEZoO+Mmp/S+J9I/lSdmk2CrCo8tMKG4d4mJnxO4qjGfluKhA2e5vLwMHBDS\n7WkkGFnV7QXh8fBcAtPoNMYRnl0eRpCrgIXm5M2ADKRKgTpDPD5FxZRkQyrX\nnT7dE/aZtp8kagj/CyeqzLgdZdOA0nMb+l3tbPIDYz3Dt2TXmT4GbrOY7tEL\nmuuTpcQnDicnyBYya8o/pe4REFWyv/mSO46tGuI0P3QYIRozdbmg0HrKdCrG\nYS/5\r\n=k7JQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOiLuemCeqOrv7cC8iu5ypUOUdPD9bhXt4v0EV2E9B+AiBdtt/xFOZjlUU2TRpgT7aT+PdIOcxTwPa/AdT5SdNUlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.b04d71d4.0_1605177747978_0.8547908903567178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.2c553352.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.b39094d14.0","@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-button":"0.20.0-canary.2c553352.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.b39094d14.0","@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-k0PueDXVHzfo7H+0emuMx6ESFWv0MnZtQG/1IDShR0imDjJYQIBuaZ4kg/ECuQAxM3ruyzOT30/DawZIp1wmbg==","shasum":"31ce95047bd27ed722e4d1e0c6d64dee0d2f7b92","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbqACRA9TVsSAnZWagAAOHQP/3z0rcxSpMnbZvlfHuhs\nEijo9acpitHoOcvta3CAs/RfJIoga2yL1yJ6Y7L8KPI8GU5dIU5LiOie7AIO\n/IQLSm6wRjYY6o20w7emlIcRcKQoEc39hvfPDbvO/9O39KyrcpIPQsQLQIfh\n+FkTiSYTFMBjsXk7DH0H3cOiDbCmh0VVd1UzMbkjYtGiGhMR4isEbVynMnko\n5p9+pnrSAzjbOwMv8dXX0utwAz41OoGhQqJeEEUIkLD6p+uYYNGILXBk2yDZ\njKO3EJyY6wAOVURbJNSL0+dr+a4dpnAaQBcvcswu0ZMShEQ5KlOaa9SAHh3P\nrgSYMWCclmjICWEEf3uXLHGclQEP5HTxNQiYwytaq+V7kbrbD1LPTSfxaMvs\nkSiSmSOHhFzvVLNe3h8o93TvWOlV5WFVnaMPxEeTrdPAwxeW4zCfhJPGFot/\nO63GMC5Jo6/ILkE5hUmMaLYEhqzvm1OSF2mlLsVMtlJsmsc8kP1ggcTo/pRL\n954A22NlJ+oVkfDWwER4N6etguJ4A6ou5SyqfFBZiHeHi0B6HqayFmzbL7zc\nivxajJCze67zupCLjXZFI7cQeUDMgVPkpKaFmlR9UXGhLJ2x8fRPWs9ajsAh\nztjkiQfyQkXAiEafJzCgNrPlIsFlQLv0BZfS69oL6iCl+K9FxbF3XQrB6nIA\nq3po\r\n=fHdH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkV2IN6kojECkbkWPq5wUr0T08Hbgq9xH1SC+kClqsMAIgbpSG/nR1weJNgqcPBxfIxwRvhrhdDrklRmrKhG2zN30="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.2c553352.0_1605220991655_0.2184267427465636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.6560d19a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.240c5f74f.0","@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-button":"0.20.0-canary.6560d19a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ltISrh3VzOcXUpWR/UFCrLZW26z6fiHiFgkkKL5ZjXkIee3w1ytqBy4Xxl3D4I9k/lB1/MOwlfatAu8GdqtxSQ==","shasum":"786cee12be99955ac8f0a8df4202b2241e10acf5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvE0CRA9TVsSAnZWagAAukcP/1KeQG0ZDZEE7UouXGbm\nXw6ZCXMEGw97r5f785IEAOv4nkTs/CjUhh9guhuJ5Ul8UefW1F1tzNJ86WnH\nbhE24kr3aKhF37WFBdsbbdJ2QSD+ChIBlsVFUIL3RDQv2ZxRJA8El+epfIF5\n5qy31IMocNJiMfiY5RBtvDgBmHU7xeEqWvYkUE+RxNZFGf6R5EAM4WfQNRnF\ndTINH/urxXACUzeCW+LRHJBgeghRy4T2jh9itD12LyvYHzjnav2AYAtwv+Yx\nY/IzF3i62c2po2XIk5mQ4EvCaufwe4MLp1UxNJTfr+k6FsbBvibtE6cEOJGy\neMsmDI2WkCCBWECj02ZeYzjSlPtXV/MWGlQyJ3+udHhnc8zkoJt0lqtfiFP/\nx7o7myoKRcdTEDuYu8Xu85ObXVpjVXtNAYya1zytgcO4YfxHJeUT+sMUjEOB\njnfIbAbVajuXqhi8rbcfV/k/XtYm/6AZULtD/u9rRr3rm6AHHW2W7B49W+wV\niyBEbMh1NazcmKOb3DVZ7PXXmUiE+MuS6OsDKfbDJjzKGmuaQ2FUISgdNXIZ\nWIw2KxuDJTqj8oUzCsocCjMX0TnFiI+K+LICqlqinFOLCFy9+Zsf/IlsSrzB\niAWJP69LC1mrDSIKIHAkjN3izjCHZc8ghK8mnRK91ZemKCy2fnZndjxO8m5q\nleHX\r\n=drSt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8xkmAz7iN3O5X60V2U6MzN5y9FD5YWEcKFeJgAyhS4QIgNzy6vWC9oZkZuPn8d4vcbSUszGbc0ndQFaJVLNd13eQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.6560d19a.0_1605300531806_0.42929626570675716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.240c5f74f.0","@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-button":"0.20.0-canary.a28d5ec3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XWiQfbchgQcwTF6pkk7x6ujHA1MW+HSL0neWfhVrGufyzSD2qkkC2M3LYaxSdsr0wEcKJfUSIE2cKiMCbnCHpQ==","shasum":"5078c00905237665fe896a22aa0f1c23ef10c3ed","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+swCRA9TVsSAnZWagAAcfsP/iky3cBw0uiRqRWWDzdx\ntXusJH3KRaJr2R58IPLF3mTO/oSm0YOEMSBf28Nc8zZDwryBYjkATvE5gkAL\nmOB4eU383BSmfVuBvi6o5aBndOoy09K7CkRr7jEcoXVEB1NBnIXGQDoXn2YF\n0vGfx/4yeIxddMSJ5woUuASup9nrQZcSy4g0I8qq4IjNBRATZ9LW2BMwgkla\nKI/cqeGwD59ZyJUIHBVt+ij8G56kPI2w/HNFKHwvW20Wqq3mq35vji7ZT4rY\nmfn8VV/LNVHRmcaryPXuxptVu0qUbQF5IaUt3GZirp8gMNfr+rilgBDnVirw\nkkZCuHRYa64A1BrXDwp7We6EsaKxJh2Oq4TRiObgkI9TbTr27sNkyLM0AQyy\nl10/pjuGcddaDu7xO9FuBwjk8uBTNCQw946VcPL2YfQz5Rf3bymK2pQmOM68\nYov8Lza3eo91RF9EhuRGcFXl0AvDsosFiZB9WG1SlKY6tGB/Feozt6nrneFH\nzALOBVdtAbK/1FgG2/IG0aVLfAUgqwfdcjV9o+QEJEvMe2CQlMqHBD5pa1O3\nGoJNXo6LCJlIovXbnjx/vz2BEew2DcMpEN/2JJu1G9om55r3bYPQ1rJYaoAE\nWt44ueBM4YCEgXU4Id52+DcdaS6A67f1blDgYkpM+1CS/W7A8l9mG+IXzBuC\n20IR\r\n=E8uc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQOodBS8Pu+M/NS8Y2Tx6ofzFAZW2pNlXUvi6BlQ7yKAiEAilmXJWfLK/g7vSIbrWTIU4EYxieQqV8gW5Pr8C6c07k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.a28d5ec3.0_1605626672015_0.06283441025737768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.03e7e778.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.240c5f74f.0","@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-button":"0.20.0-canary.03e7e778.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bEIt4+zQHVC92z1u/1gmiFwPdpynfe3ZfOpKhjTyiGUBDezVbg/dIvpCQ7mO0cfoO+dbH3bJPCnD0t7WN0KyqQ==","shasum":"0f291aa91cc6b6f32e5c34bf224ea95ec9dc4fd2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCP2CRA9TVsSAnZWagAA0VMP/i812TcFZNaxqAnPZEWR\nLR5lk0Q4mChpAWHI4ENREt0RXyO6bv/vcjX38L1H5TNlDD8hTG+G0jXoVNE6\nRrbxV2qSaRH8DEHj8HJ99BWYzRoCHz/zrRCcUloCj63v0NIDn05z8Lq69wxa\nyahTxwG8Uf1eddfz07h9j4itT76YvmALdYb9UdNS9cORzccNkYPKmWWIC38z\n6lfKoX/eLAVElDVJGaU2o9s+3H+dA0YmHd81cocIkRi/fRADYTIwkaBzB0cH\njQnMhlu+lpEQmTPy0oz6VV4rA8EU3GDQdjVm/nVff6XAyDu6sCguaK0BDtC8\nDWSWdQaVuo7LdbrQfeeqp+LhkavUHEN6tQzxf0P7zRsRn8VOlKvEq5QFeQat\nCwPwnV/FVhKjWeb4lMl5uV+oeDzQaBWVPFRQoDUGcakz2W+n7U/owHLmUDGg\nr7vmg0TZVzRpFVAJUCP7kcFT4XW4xwomBExWoLNDFzGuuwoeQ87sK3B7INkS\n1BJ3cqvMdB/9TJ+kVV97xz3yahYCGREe/Qu61yncwvWnHKSBHCIRQiPRHisO\ntWhDkKpzpwF7LLNvsq44im9nRYPvUj8PD3jHX3w9Ra1g0YSYGDoFPJpxYEwK\nBOV/aZMNx2Wk25OT9ZQQEWtSajJjwEIWPHAPlAMU7okhIyfCNEOprwKbgp0f\nVjVm\r\n=sONA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4ULQT0vLletl99JwH+MhZreVKM/aZHXucJeZcCjIAlAiEAxpFTp1NOj2hkZSvqcQL1fbClGhOewkiIWR5xg6rfpTA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.03e7e778.0_1605641205665_0.5882335851662692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.ac8ed597.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.482ff9091.0","@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-button":"0.20.0-canary.ac8ed597.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-b8lqFd1HNrZbfkb/xLAHwOQPdAkCaL2X0nucFkoBYrzTtDZHpKS22Ahpzv7Tel+0uiI0mOosKAH7vKJvBZSftQ==","shasum":"013fca11a919843fdfdb1cf59acef65a0ed68d8b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEq/CRA9TVsSAnZWagAAAWgP/0rlmu2o12zSdREf2ere\nBWPmnPCJ4jHrg4Qm09nbLH+xdDbHTz6boH/oRsA3J+8C+02wPp0ar5EMQyvr\nk20sFIST3TrI4hDmORmua3nj8E1QU464moYPGmFt/hED5QDVVREB/wdFsQMX\netxkslPjZNL7sRmaVcamefbe5xoXTHLXY2b5TNxr7IrGKYiQMOSe+EYmgQnI\nGjtEzmh4aIsR7s6vrDm4nT5SOyh0bNBXvFaL2xbYn1H6kPqwHipqXjQ8GLDG\n7Anxfv5DvbhkHbMSi6jrJ2CVlvzmxMx6Z7skllCbGD44XpkNrmTHig4SEw3j\nLjg5VQyoy3TRw94SWxzhbUM+S7vsAINyj/d22nx9T8SPsoxFzcQIsSK6YKWu\nPsMJ4rKOq3nvzknBdEUVJ7lITKqPiHs12oXjXFph7TOL1pdpq3/rAw+wQvv9\nLCiXBc2s8adPCxNr2ANXo9rdBwzY6tM7O2W8ByQqH8FYkbafejstGJMaqjEm\ngbvpV3+v97gSq9erpZEW6jWjfCxzm+E9BiWiNiT3GsbbT9wtyYmn37CBfuKS\nNGBE/eIQ3M1GOjsv9JWiM2VKkRgtdN3t01FGEqUlW/Gvx7zboqW6uicNiH4t\nNNpY2uZv++Jo1Or6NFIOKh2WXKPl1xsOINK5xN39a6k5ioaaQ7i/AjBIG6Kg\ntc3Y\r\n=nths\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/m0+0ymfpmrhuVA8eigiPElsaOEN7zpcxDZA0lisrLAiB70ZWFJoFPFBGFQgbZi6PgTHUPXXRE6A8K0aeXx4Eybw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.ac8ed597.0_1605651135146_0.179969530766386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.b6a60f60.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.482ff9091.0","@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-button":"0.20.0-canary.b6a60f60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-whsii4u30p9ntmdv979D+mrMtpbif2tqoWTTdGEpzLZagg4r6DWJ50ynmkES57MfIG1hgvUAqNFmo6MK5syGiQ==","shasum":"ac97705c6209949b37d769131b2d803e603225d3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQ7CRA9TVsSAnZWagAAGNwQAJIXyyoMMmBk80w5n0pr\n7w3+EfOzwLabzUv7SDdJn2rtFCa6CKSA8HwYDW2j1iSoJpFAO31MpOj5vlqP\nEWBMts7rkU+r6BnTwfKEyu6jf420vWwDnoEdCXNLMChybvGAi66bYhSECdA3\nROEi5AlMDvW2FmRrvXOZGAW9uv8bp+/Hue1Shav24UIEpeLh94EaiyMkEPFv\nIKYJWgxokLB+ZXiOkTLXHn2zoC9xR0y+Ng5G91e17ssi6jEwum+zDmwtwmvF\n/ywhLA2tu1xPVCJTqKYlzFABrQiA0oZjE8aNrUesXzgY+vjvJu+YJzvAf/m6\ntBjhekhwaoFztqUfY+GECHT+lye8kyeNiSxkVEb4h2c1MdVvWm5GVb6MPB4A\nTou2xX5W0iSMY7B9h1becM51dX2jl9Q/wgYEIXhtNFVNl00lkAg7H7m28ETq\nYy4OaNTi5J0eQzshj6ESCpcMg1KnW+c3TwuRh53g/DXdFIqcmjbPpg11wDsy\nmWoio0PmTDOhrCScaN1Yku61CfPhktrvNx8I+S9kkmqZ5KdkjCgT+DIP6Gb2\ne4xkw5fqCtDPitHo2FaKazs/WbpfngRpKR6lGp8J4k5R2V7ORaMtwzDxWdxB\nLJhmBLCPIYXCtxPkneI2m8OknDe+bQnISEsLnad8cy7rWiqLgYV06SRDtJt3\nwFiC\r\n=OsW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1NjU/pqyXaK8F6k8CyzrFCDNHJvUHGp4YC7yyFyptrgIhANYHVgw+xnRowV44AX45zPHAxHCG+poV9ofwncNdSe5B"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.b6a60f60.0_1605653562834_0.039720515600808914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.71cc24fb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.482ff9091.0","@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-button":"0.20.0-canary.71cc24fb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FCXZmZpzot3KtgGb5aTj9kgEaiO0DxcEZqYe/M0BlUXKGMfO8KXObgRRJMEXR5/OLQ5rY86Ft9yf+k0LhGEcVQ==","shasum":"7ed1a6734735439b26bf05ff877eea6359791389","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnwCRA9TVsSAnZWagAAdpoQAKPk0lcDj4e0UNEG84Sc\nzPLZRgQH85CCQ+dHQUn7sq+TLNhPu3G6K0c89yEiSlF7c+u4OdjUM2Mc+elK\neHVs007wiAiEhOAQa/yHfDvzoPQr7oYCtWAArpIwJRK7U+sM+Pw+vikwUUwC\nBWVb6w5fHBOlkvluMXqGjJJmQoeQngZDye2mrPvEvnL+hbiSQjWhJIYvLKos\n4kcIZstdtwuygDoyuUvEoItU4jgnJMM57I5DrYRqr8NVMzcfYaNB33i6uTgy\nVvKztAFmAebgPTklXmbRqO2BWCTRU06WKlQR8FXmEaRreFru8wL5l1YbeGqH\n7Y7ERjdY2JmOf+jIsWUjnS/lpJsx+xvpcfWTJNOaUbkGaYqXMgYmO6ka3QUj\n3JKQHGo+5lpShMdVTXG3rFG5IfKy4OxLKuM9i//nh6GHex8QG4/MHurFwNRC\nuKqrMveTYYWnaC/T4ktab6yCKnRI0lbapr5hIqlH82hKDn6iSZoAAb1C7O0i\nmjLV2unjAQfjdicricmlM4zZlWMoJTAdYkUhP6FUXFyNvd5Ra0gagN4ag2Sm\n1zdzCZB/K8dWWLoo3qwNPq0/VuZ7ZKevc4suFGM6j0/Go4//QvEQFbYrfhfi\nsAInekHec0vgi+Y9lA6hsj2N2N/Zqb0Gnn0K7nRTGRhaNg6jasWAuN12POZA\n6wja\r\n=jDyD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC15aLPV4sQ1Fugk7vfDazgAWR+e0CQI02EJXjOvvsJ5QIgVjfDq/L7GtMoNafHeNMSmvl3erHjoa2Z4tZ2yDr6PI8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.71cc24fb.0_1605655023678_0.24381975853589788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.761027ff.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.482ff9091.0","@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-button":"0.20.0-canary.761027ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.482ff9091.0","@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+9DY8r7lqcPeXX4VGj2DjhfXOl3Itv0uA3wmc4i/RdHhGSesgV8HgIGVXCjGWRHkfSLNHa6+46R3nSW/LlhgcQ==","shasum":"56f2417c4847332b307bcaa3c928fef99a55844b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzPCRA9TVsSAnZWagAAXX4P/2yyTJOLxdQdsvOixUuv\nno/LqB5WQelMpZbRSS1IpHFuyggJaKecvHXC1m6C/3j/dCFZ+rtxtysNqGRU\n90hk5F7RC/bD0ha3fDo4Khfm8Oq2Vbga1hbLt5XE3pSuPPRapju2kCBOMCiY\nhWZJDxKcF2Go6ITL8LVu4eI9C1e+ucO/TTuVd4GY9mMSa3lLz8gDOAyoFN/g\nPqIgAY96o7HXlmPGW1k1RoaGJmD8KG+6GJveFXYh9MoSIeFT1bfawba2DKrs\n/IT5/p88qWF0Hpy7j51i/A6Gz01SGmryrgHwRcoYAk/vqq1aZFQcK/aQI04J\n4LziomwNoaDPHJ4+qOeWdEgX8BCAp3n6KgY7xR5nQ9G+rM0HeO52roI4cWGy\nGncjHSAUxw9pJChv1mZ3xTlsrJ4+GAeh0xRR7uHFEYq3Jdf9qguneOzz69H/\nHX3SlSQjaZopK+gyRJ6vu9IPdKjmT8dxqco2zmGFBdQek4sejOopwDH1Il7C\nsyIsipPNoU9v3/TYRvkJvSN8bCWP6iEQtJribvRlk+0gwfOnrLyV+ySAphEr\ndDsNkf35947nl5NDnY2A5Ruqt+FaVjLMhzLD+/KgwCtToyNWbGQF/QrGyrwX\nQuo6298ENY7noZYWhQ871aluMdqI8Oiqzk9aCXTAwCYo0sPdW1JJHrZYyKbr\nJdXE\r\n=Yfz4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFD7kIe3+Xbl2D8JMPSiDI5vmvwvE0QhOLQpSp+oUSsAiEAqvhkd1fvv78sHvs8ZTi6xlkrfWnoXwH5NyCLOTQFjJo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.761027ff.0_1605737678668_0.34234307653940643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.dc93d04c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.99cfb6bd5.0","@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-button":"0.20.0-canary.dc93d04c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-e7STouYHmENsrQGek7E7u78jooUzMoxs3AFvrN2AoEBxSd80ok2X+8SGIPR0JFJW7g/W9i36hN4FuIrnsv5ODw==","shasum":"5ca16c37d8a99e2d10e67aac5afbbbcd5c3d72ba","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4jCRA9TVsSAnZWagAAG0oP/iSWecfypDjR4z/3KivH\nly/LZFqhxwasro7OmToD24Pcs68MBVk9x+x6whfaXDqvUZXHQNeu/CNHZDcw\nLVOQ5c0GsD3oAzwx+crAOf+oMp5Wa6VGtgxvO43D3GWGGPQkn+cddz28fiUQ\nFCyMFNZNxFgilB2/uo3FqfwClLfE0vkEEyOorm+Hdy/a9j0yvV4gnCLZ0r8h\nomMRSmkWNvlwkegx4FjHFdjLMU394NDwmC3wGB2GQSfTZ9mvtITYMD8jfOdy\n9N+ot0BVOJVGIzBb6SrJGHaosgsH1xwMaM3P+UqNWn5pnFhz7o9p5GDv5j93\nUVIpPLowivULjlspCcXVd0QYE0wD+wAjYDk8mfwaSt6BK/Ee4zZbrEWFe6i8\nQwxuEIgz0awE4jTAlKAEWI3gfwvioo+XGDCM+rFgryUgvvtme66wzeemhxnd\n+p/t4qdWLUdbKRqzQ3cXFo+4aRHSz3JzzGpi0NuZvgevcA7oUNev63FvB+mq\n1rGkfq0nuQUO5biRU8Ub8u7gQqAVtHDATqN7EgL0aOuFhXoiAwMGvSKVllXz\nGi+KSjXLfYTGguL8d3u7fipMqooLEtt9gs1zJe8vjPR0ypnxJYJCLZ3ihtyh\nbAQM+tuGdUFMDwkNCJmKyVeeBQ8pE0F39TWb2eHaEQwZ3+qpqOe+xB0RHdvi\nLh/l\r\n=4yk9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1s8XeaJ+aDIWQLubp6hADVkfPxiAcovpQoMe3MhM1fAiBaf30IGSUay+qIzO8zWrySmg/SYb3WBgtpkXyzTcRyaQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.dc93d04c.0_1605738018819_0.42746171216507456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.99cfb6bd5.0","@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-button":"0.20.0-canary.4a5d4eeb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3GgY78o8Zfrh+FSK6sT1Jaj++yDNqHM71Xf0TIUmW8VJxGqm/z/HTP7/HQQ0kYVkgpHlZRYfFSRMFJFF8PBSqQ==","shasum":"a4935857bbc98665fe0a2b63e5cc740dac1abd89","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldzCRA9TVsSAnZWagAAMhwP/iDnyzO25zreNIGgDljn\nddbQ1HvHJYQygPisY6wAQ9P/oDlcI9RfhF83qwyzr5+DVzi4D/VthK/MBtV/\nFhsq88v7Ua2MuASAAo+VIyYY4jIQZIrFj8h5JkvGewVQXzPuSD7Yqtj0nZuC\nzLFQCIsRWedRX6YeNeERHi+Z7msJZjFfRnwFRIoqKbLANLF7tHc6tomtp5f8\nAzC8FAlxJPlM8hnSwWo60/9NBRZbn/+tRPSDYAR7zpsu9SVLurHjtx9j5RUq\nFbZr2/mZpMLu07fw72viBo0j1LiZvXFQnR4LkbGivYGRKERYqh9hw0eWzaAB\n3NdvM9fv8wnJIbSKMlgr9OIwPwVRiKWI3H75oG+HYiCp8IN9vWOsj+QklYwA\n9zRka5Pnd1eA4uHmROmN484dtzuvg4u6K/FMZKRWZVoU/fLi+aI+Fulle1A3\na+MOd69zq6QmE5IoQzzpWLwzQjpnEICAivH4fM80/NB6W4T6hY7yvw0Kj+R4\nfy5Hk/ah++EkJriM0gt0V4KWntKBQeLHaCQinFEeTalmzkWMObawMmwiRW4P\nIXao1EyISOKsyKDMuP+vCbPepyvXanQoHQn7H6EAZpT9zXL+6fkP+BwouM2O\nS0QTNTKwzDN0vDeL1BEP3+ouYvJi+NfVK+zLpHxMPN33zwqr/INLXOn/Zmj1\nX2bu\r\n=Kb2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeuCdfTVFTFyM38wu5ZWjGWxj2fjvNqSJtCQDMHISrPwIhALnmZb19n4edE9ZpP2/sNWeUdsJo/6j7dSRNhHHUUfrC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.4a5d4eeb.0_1605785459045_0.9571737472881547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.bd176a15.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.30c11bfc2.0","@material/dom":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-button":"0.20.0-canary.bd176a15.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"=9.0.0-canary.30c11bfc2.0","@material/rtl":"=9.0.0-canary.30c11bfc2.0","@material/shape":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SEpxVljsiiBBSJpNXtEqq98ACkthkXeHyKtI/TkrjMsdvzWQ2P7vd/0eoAhpf4kRY36S0nNNHppXJdBrDr8ibw==","shasum":"9897ddb1a0f0dfa3a55f6d920ffd80dbe1f225d0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsNACRA9TVsSAnZWagAActkP/0UoCRYY4k1TqSghqmQN\n19CoHHUD3dz3MIXIUJcTcK+QISrsYYYtcS3xUs0k7fa/wT8HklSgdVeE7veV\nc+ML7gKI9eZANKTWCz4bicK+9Bz17Qu3epx8NBtKulq2fjtP99+qY8PxYMGQ\nwrQUKwd3564xqtKxaqfqCF8+soVbg0so0wba+fTUviFdyokv6IhkRftgGb7A\ncRVjdH5ntsweLFUza8uQzp6XIH4iVRk4QdztrXaotgNaR4UWDfsPi8LM0GB4\nseUUsebmiEL2qbf3O9jsjozmz8I6/3gfovtp4fI77Cds9dUwdNo7dEj/FDXx\n0NIsFFvOo+W0XIh/2BdxPCiqXEACZrHJJM14h938rzJX3YDWDkcaiddJ2WQy\nVxv7F0nsPr+ZDLyTrial0Muk8ntFbwb7dzl8Jajvk6MmDnK56XnW5TjNmCoX\nr0ZhrygFzNwCGuyy85QC5Clexn+G+KtjdCEihZdcoG/d2bJh2YaoTX67f1m6\nmmkG7+G3Qy0mewM+GiBALzyjOjpAAJNyhUyvSCBFrmDvoTL3eMt+PhUiF27H\n/iYfE9KjEGMSiSh4OTa6uq6h7jZEpqq4OrKeSuZMmKWL6OOP3aJjllIauArj\naJF4WFYbkyijJz/8qjSawkWKAX8Zgz3BEwbFh8cKmccLMefGdqnZUVn/phob\ndfl5\r\n=HsNN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7HvaDb04D8KR93iXVAXOOc9+3z5uVCiARVgrbuf5JjAIgOfa+nS08QRBxYW6DeDfczJJolwD6iqshFmUK+Dpxc/Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.bd176a15.0_1605813056223_0.8650405809997279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.e85aa60d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.c927a5d05.0","@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-button":"0.20.0-canary.e85aa60d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/feature-targeting":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xYgbWXOxhOlG6CHP2iAMvVCNoCqIr9O72w7VyCpEPmyNuJTT6koGA669ctGj4ee7acOCHEc+gLnFEMCoZKkVDA==","shasum":"8a085125f7ddfe314701296df9d39e0ac5b403c7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbGCRA9TVsSAnZWagAAl2QP/2331LNEQnPJEbAwwAeh\nS5sayV/KTx8hRiLz3VbjIGT8jYDbm5yxmlcU2FCjf/Wd1XeT/d4Euk8aiT6u\ndvVxVn8fW13wEHNUlk1E3zDQEaa8lSFt8cHY4R87snUxjTTrj+bdjH4CP9KY\n6L4MrvSXvJT8OEdlEN+JVuBMJEAGYw1HXwE/uSC0Bgf1CppIO8qTWnhige5W\nAnbdnDqdi9DlGFW9U+S4X6al865Ob0WVPqegnoOIoByHQEe6W+eENN+63DDc\nQhuQszmlw7L1ebxSFUV34PQztFuljifg/8uDghrLnzdb02sYTh0EgDnd0uhx\nwWOUNQ5jyz7Zpe4b/8trLS6w4wlx8H/R0sUB/WfgJ6+LLZ3+vyYZAnNfpM7n\n8U2Y9XcW/eoTPaTcG5Qjk+MugajTcBE9CbrAYq4alWLXUUkIiExVBTuvChNt\nro0xc7jtaz3mskrhWKziaBY84BC7UDstxL87z5qoLDT5PSOen3Cm4KcxDdTc\nciiWU0mEmWWbjDqlJmWX+dl0tTTHqujXq+Q3CjhPjSu24Cy3GdswkBXSbjvQ\nhx/Cz9Kjl93qBxxZdUCickfGdD5qhHYKxDg8g2mHejbeAVcnNpTwDG2ygKiH\nfUx5ldAKKows+N3/HOpSEuqxbm7e4CG74Rc5Jfw/Pf697elZgf+3NHl5IJmj\nGWNP\r\n=3WCj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6Bdh7Mz0/9gck821TKup14DJBFcyHV2eIMfSrzScSZwIgGEwz7vTREXFn0qesL+Q/7cDLcMGlj41uIlyum6T0qX4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.e85aa60d.0_1606170309840_0.6430771196032974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.72092360.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.c927a5d05.0","@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-button":"0.20.0-canary.72092360.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/feature-targeting":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-70sZIMh7UIROto3Y/WnQh3ja1GvD8B+egmT2zRb2AHWz+69EtkYc38JqYVhA2RoJU5KgwWQrokQdd4Nron51UQ==","shasum":"a13663aba852387d902906e1cd4f6418bc5bff68","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImcCRA9TVsSAnZWagAAOhAP/3Se0pbeP16TI2sj855C\nQRKgf1sc9BRYkqRVuxpwq8ImSbRB/alYxjMfSB2RsrVXYa55ijHOFdkKS5++\nPFLxL6AU+gXle3rE0EujzeQ5LYDt/zcL0cjIIsfZZ9QJIsI8oh2DpqoDU1oZ\n73lKNLWE03tYjvVLqCMFRdThFq397v372SgnpJj4zQw4wJAEVlkx/r1RG2cT\nIx1kSFWq3TqRYTXs9Yza8AJWoOLfoFFAbEj0WNrsbA84ETSyVt+HwlLJvDwg\nQceJFbYcWMhmpiBAA8e0vSzWWm+172uMLnJy8OFX508CgBhs7bj0ljTp8uvB\njpyIcbIVQCwfoTk9IMrO1crHXJaq+IEXlTZaraP0P0bSHVL80PPb7UyeRMcT\nEvDdKfk/3x9voai/ck3fVt6hflLfblVL9XOFcwoj1+8X7vRq8wTfmrJaMqrS\nbpecAs9JQPuhT1Wqjvg6Z2zxDHo6/moSYv+yzLcGavTo99Z38c2h+rqyG7A+\nE9KjX1w1LAtwTRq+Iw/iWL1QUdLm7vwzlbqW+oEoRT3Rlzo1qBTtzj251g+b\nfCO9kTkppY0hOpWecFMLt2BsmBGldSucFuXRi3Q4EBTCH2lggz2vlO8nGsiw\neMoZPNJ1K3vv1asHgILFQlN6B+VDZhGOH8v9akPp+iX2dMl9iBoH5N2Nwb+3\nMqfj\r\n=c4X4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqyg4bxejhGFlCYK+FvmN66tgDVQ2rh0xqQNGHtfpv1AiEAzV4s4sWwNg3hLwGvmIHBrhuLdLmWw9By7GZGGnZ7w2c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.72092360.0_1606191516120_0.7332208149707153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.baf9d39f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.ae27b44b0.0","@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-button":"0.20.0-canary.baf9d39f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WXu9L+xzqm4EwtTG8yhqRVkC8geXRIcqIM2q2B1yYwJaOnhzIqhaTPDabgh3o6QWbXN5thlzsXJDAhWa+3A+iA==","shasum":"dc1f7d3e768045b84f669a784cb4bbc89a2df814","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtE8CRA9TVsSAnZWagAAt5EP/ivzLfQwnF5bgg1HRffN\nSczYySTD6qvN9XZMhLKMs8dqT9YmDEzuICJ2S+5BGrETeVdA8B0e3MCmnT4o\nS28emcCXpit9q70ZjMc5qvJNd8cgotDvz4dPDbnUc5Ar8YEGu0lo21SliKpA\n2/f2R9zFSvesNYOlExiA7HRqPNbpMAcWkyva2aoiUgrgwjf+KUIj3NJJcwf6\nevO6Y2qA8B0pZjPXBoatPcN2MgitImjBrHkAq5HkCAPiEh39k0pzly54jQtM\nfZoPHj5R9ilPKyV9FmZuVEnLqDDh9DdlgDW6fUygzhKKUxahNSDJKa3d2vL9\naUEWyCBnII+0UI38cpp8HBuSU4RzKYoVE4ICjfzK1NXC9t9nQzRcDlrHFtqm\nQzDLKeeVY2RRQhIdfVW8x909IOMG+cCfKjCS2DJ+TCyzLIKUnrvyuvOprueu\n0Leg+qiZ3B55lt+S+idJ4Z+DeaJBYX02/JJVinNEKaGFQqpvh1i8QjoAyJmE\nVI4N6Sb8D49Bp/Gt3W8dZeoV1eXLAdAdOye6AshSyf4QZq7RllvF1O/tOy75\nWn4pcQF7ASHxf4DuDA8txGevWndK8yZGy8e7XIy4pF1Dya3iPIckGR4NdMES\nTTalbYUR7StkFxw74B8hq3bsjxWOhOpR2KMhuIX5NKbro8YAwjPdkCJhom3U\nBiQv\r\n=c3Jq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLzKcl+SQ3Czm+DkScdUnzOHS4kGM/PWFUB8JsB7XujAiEAtU3Z6e6QiAO0kRq++hNhIA5W56xmZHPjwOxrHguCqic="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.baf9d39f.0_1606340924187_0.8107293291976312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.51aab0ad.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.ae27b44b0.0","@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-button":"0.20.0-canary.51aab0ad.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gWsHuxJy0LE+OoXZ0RCUJzT1mDp0MFTBybaG6lggzO6lauI/2RvKFcut0TTBcAXCybvxPii/uHfMLj+slnOcKg==","shasum":"a40a8aff2cb571ace483da0d6c8cf09d0cb6a37a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbpCRA9TVsSAnZWagAA/5YP+gOqTKRj4IOs7wr6NleR\nwShq05vQKrO6Rb0mPAJUs2+vqbWlh1n2qkPKmkJYWLovPWs67M9FaF74cfRY\nyfVagRECtkSyJxONj6nI7hEJ8qtGd3dtGGGLt1N1Uwv1Xmv0eL9+aBV71yHq\nwkQ/8i9ZCsIRA7oTwotAfS4/1vsnOzAzJbd02UhB6ptigszqT68/b0eoONNy\nt0rlqrTR1BKOVsDH4ss/SUnU7cV2d1ft6Vjg1xJafeI4+QnLKU4SnY0ZXFD7\nTV5ccz+Tn/6TYSW1fdLEDV2uCHNO3rBv4AV2LYNWSx4nQL8qTcaFYYVe1IcP\ndcv4N+7RaKP1qj6HaRt1CYJeMPb4iRzmK28GVCpbOJrDxH2QUFMnBLw3wLQk\nmSCzSnVDiXhBmCp56i0fas7XNe1TTepXGikOAbjOMdScZWRiN2p8eC6sKOP2\nqDtJ/IDYfzAQF+rYeE2bQvE6No9ZSaURi8w9TFFf93J76TFS++Xnoi/Xt/cx\nv/LsYq2qPNnhlmqTolSq1ikR8J1I6wJU5r4ds258rqXD62vsz6pdF8xjSH31\njoPgXMS7Egewqn8N1dxYRvykUpeG6gfLtO0g/JsxnUaUKQyE3rkHi8uTld5w\nRzmVbyWVDoWTiyV3e+hDw0Gc3dS5xD0isuW2btAiY6XXP3wo6fl1xV/T393/\njyV+\r\n=2Ubb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBR+uIi3UCN9JZXYvA8DMVP6XKOuInXF0zUw1ele+/2jAiEA8QiIaRXgODU2Nu5cVHvcW7I4ze5j4M6sBrKcnl8vQAE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.51aab0ad.0_1606784745273_0.2093435270614441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.ae27b44b0.0","@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-button":"0.20.0-canary.8fd4af5b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Lw4ZCnVYbM3b35hWJU2uHbYjOL5/UeoJz5Lxil4RBFBOh+pZXJNe2CC7hd6qq651SSP8g73I9/FSWJ7FHpTXyA==","shasum":"02bb4f7e3d22b5337a2a06b87493c509b8e0d9f3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDD+CRA9TVsSAnZWagAAuFQP/0MCiqZUcsnfswWaEkhR\nXIhGuzDP1LXcKIa4HbRWOgENPQgOUPZECBbkia4lyY/rNyAjbpRuW2omcBxL\nOAr/9FYzifW5qAATrAZzsygtBJ6y5xhoZ4CdEGxABv4uGMIezXEkCNS5DQxf\n7YLt4NzwrsUrWMzkXkxnUAdsVI6iINIJ2sVk/FXHyTEcP0wJWXUTVsrnec2G\nVFzLGNNsqg9MeWlCrnJRX1xx15uWOqoUymVDwKiVP/nHHoQoY26z/csl6rJd\nuUMqdwPxxkxKLlcEDbLSq916LnLnIyNvjoIBlYIx26gFeDCbLke3fBbYahEF\n5i7P77oxz6BFzGF1qtnHZEP/myPILab+GoMwDQyaNgkHtCGHqv6U/o/C+V5i\npo1XO5LQhds+2H8/QDXprO9eCQEhBTUe3DAoElFC+0wG2pHymiFbsuIA19qB\nY/ifPfbMEcRTUCEkjZ9+VAa6nPhRTg9XPk7k1FZaxR6qonmpzZCD98TE2WkM\njnk2ARylCdNUd9R6OJfCWE13WopTNLbyPh+pRmSuV92/opiIJ2qxbo8P/3FS\nQY31TBoDC4jqFtsrqc0ZygEfbWwte8MCgEh9ldltyHeu/56okinycWdFRQ6g\nAd5BetCdLc/2D0vV8iEG3zXDfAFlPZVAIl4TXSTQP2CVZZXcObKUI3WiMg9e\ny1/9\r\n=No7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0aHPS3cq2CRniLcQNLvFU4f5TG0L5Gq6prdjyNLU0pAiEAteAF7frzKv5ugEUyCcGLYZbb4yZtVJQf7Bm2uXmeDY4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.8fd4af5b.0_1606955261763_0.8192458669979021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.26d14d2f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.ae27b44b0.0","@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-button":"0.20.0-canary.26d14d2f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JVT69WWiy7ENVUOnk3dXI3soAaeS2xn+gVMBird2Wq6F6LAp5awb3EoyoADxXk5cHls7Yse6/80bJnLsiFT4qA==","shasum":"f51bc05f4ac08b13a2c2dea6e3a3fda0152c5b20","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDeuCRA9TVsSAnZWagAA/IwP/2+YByXvmo8GDybUfOCF\ns1TCVOgOHjgRTpbFUA0lTErrIw7/lV1rt7ajYPq8N083Crq+qsAgBPMoYRwh\nA6kdaqm4/G+jyNhOsV7jqozNlBLOlfPrho0o0d+mv5CsmkQeZ4sIeU0Y2vh7\nEoshmniotEJ3ZTE1tTIhPUBhweOFb/yiuxCjSx09nueay7fbUpMAwuUIFx//\n6mXEnKqAhY4lp6hawQnsSQaX9g/mxgovwZGSLgaX3OH1ecNYRGj6S+6nDWo0\nQ/XWIX3+JZKUX1nMymdWmUsMdAZbDVh0iUzi9gax3Vf/zJZgG7mX8ba5a+AH\nLzAU9h/GGskxc81IVmNtq9NVRuyoLmVC1ORs51nszjf3HnhQCy3qlF5sjI/u\n/nJFDZJWYyEeyi6xzXkB+iMfaZhosjf+yuZW1It+WyOm9l8VXRdLqH8hucOI\ncfB8Em7/i1cRHowHV/lAjz5kQKe0iC9OBl9infvWysAWOSos+Lp2Mjn8s+4X\nif+t+xZgG46BwMPoQ82bDGnVPOal99H902jbl8oQ/TPhFdijcnF3bJSIQJ0U\nqsm2+jZKT4BstRvpnk6Mc6iwZBMrcdXLTjZI3hTjdUxalgaiSjKWMoc+K5Bo\nWgNvlF9tuUo3GoMGsaRzlIBxbbiUba+K0JJL3QEU/YK37tFDKm/Ol6Trs76K\njeIp\r\n=rksk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGf//4cnAfsTvrZ5z5IjiPjfMq6TeaUU6yjq1Mj39slwAiEA+VI8MSy4iNPUig5jASZToiq1u/MOpbAFn6IG9RTfpng="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.26d14d2f.0_1606956974038_0.3589232552574162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.1663d7e4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.11da3c0db.0","@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-button":"0.20.0-canary.1663d7e4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AKPLw+a+RurYHCDvZ4yGx2gSR3s21/L616nR8+WADTL6+YIhpvB61xOyiiTqEX2GyL8uhvVzQJ3y0xp3M65v5w==","shasum":"3c6f3ba534df91c4ebeaa9e4727dbafc2c47d72f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDyICRA9TVsSAnZWagAAO5wP/Rz9tccgNX+WBEp6hjQw\nkg08NEpVGjiDyJ72UKvOLLRGVNVAZ+SMiLFDn7B4B7ZpEabK5KTOzDF7F58W\n1o7wx8gyHCK+35WoJsQHEecwRfyPyFl1/0dAtCwt8Yxvh21XiJFPih+J0hJD\n9Qse1vKyRg/+F8qRHaEDIIUAWnpq9n02GSg/Vs+hvRVMUyFzleZYnizKrcA0\nmCqGD0yjnag/JSTMxXsDJopkcslRl1vI8cFexsn1YA54grdefHobJaQA3D3G\nsDIY+PE1zTN/lJa9EYV9xm5LdS0o1W3uc2gX/VTQV3WpTKmu0EKJb1snf0CU\nAvg42xFhDW7pFXsXoOyQh5Nfa6V0qPUtWk6nEyHS7sarN0m1PO1ZfruG5ReS\nZZjh8cQXw9+JvnWT9Mjsy35lkfR8NFgG3c6JBBpwJUmztKLWl+QdAPZn/rg+\nZmTpNAl5FE1PsBK73AeU38/IjhXnLweOyHktVJgnsqaNstO1T0T0heqSmPcx\nB0Lba8M5ITXqoxyO04052rNXzT8GPSkny7DGX/4pzs4am4pBWrBFaFilewse\noEQZB6Ssd3jE6qJ+oPWwVaJk2bw6171ZH785u31i84i/59Xf1sjkLqNgY69Y\nSuCveecyhqRsmfEEmj2LMwo1TFGkcxh0vMT1bXCCTNcM/HANBf+fayqmPDfq\nwzWr\r\n=U4bo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGARaHA/KjM50Vc7KbWYQe1AQiSq9rD6V07ZEzl/YXQIAiByYPWSuf7l/WgquQjCbSiGXeTRbmz9ZbBX1DS3Gj1OAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.1663d7e4.0_1606958216165_0.034407800929430854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.11da3c0db.0","@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-button":"0.20.0-canary.cbe9fc12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wtgwlokbHFibmi+C/szZeO5iiPOvGcAvZt5g7hhxt95mQNsBY9q0BCOfWb8iwQFMgADFEO0qv0AOsKtS/f6UvQ==","shasum":"82836ceeedd84b128243b3840336dca60ac79603","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTd/CRA9TVsSAnZWagAA8S8QAIry8Zict6cinzIP8IoD\nrVchVe0kTTg12qfZPa2sadOloMxCEJllA8AFs6Bp2L8BMOQX2+cC0pDdJlau\nyd89/jp+jOqPwNEbJZ9gnvnSPMCY7JX3KT4s1xH0ltJQeDo4bm6VSxeCo3sP\ndpFJc6CTucCUbIlEo4oFq+kQyBhvbY8GjlQ1zD3BC8/zvbxHMAUHAmmd3AL5\n2CNHx3D1x3Ta/k1FmFGvbMnCgSFQk2qZGjUmv2MyS8zRD3/vhM0EyV6GCYg2\nk3Kk2NG5ISfkDtvmXgtKQZMCHmB6a1PV+9ixViSgCyj95FCMLNZORjkX0KmQ\nvz2qPzvUxD7WM1gDBFEEDv+C+7gLMcMucc8vuPfVasXnKXJrVNLMWVRijMT8\n9tZfSurn4gZaiQawlAdGOEC1Qt9t4lNG9lKKxwlmxhmXHnl8p5zUTj7SwyuO\nfRbtSVd2XYYbhjiJQM9RFK6gbYYXLtoU2NvN64g4+k73oCefxKC1ibSqrdJy\nMh31QIAuXR2QWuWEoU34+9CziZC3txx3FJikOEgrlrq7KmUvG9a9qQLeL8Ec\na6JNKu2TTPImvLXaMlZ7iE/WYXz28/vaQwJ9jHIdjix5ZTFzGLKQ1QmqUTq1\nPhEaGhsZ+nArF3/Gt0u8rnPSoXrErNrStWEtEjFUqAjnEScDDocbn13JW55A\ntR8K\r\n=SWjh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLFN189u4Qv0lZw0QeyNRcq0Y6TPnBNCCr7Y+gYxWH+AiEA7Dbn8NDIuqQ84DWme0+4bhNgoYz7nWhLMvIF9v35tc0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.cbe9fc12.0_1607022463268_0.2947608779865105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.9755be10.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.11da3c0db.0","@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-button":"0.20.0-canary.9755be10.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WHRGA5cFTZTfxyXJeFC9b2YMdQj+/GQ03c7hQ4imn+6AJkCG6YFb6va7pmI/JbdvKLpXEMkIyJ0zdFoxVnqnIw==","shasum":"e99b1e5450f2e354514f7a68e06ba281dfd6dac3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTu5CRA9TVsSAnZWagAAXAoP/A0z9up4UjD22zjn11v0\nPhfWeMSc8lSl03i0QyD10PpnzWBkT7JKpEaDUqVgklxK35ASPPRlHNeBpflv\nXbWT1Jgb+y1QqUrc9wv0e4H8/WlpQqfqOJELeSQB8gniqt9i5TZ2Neg5ktUW\n4LdCrMPshpv+e1Gd6iiT9icCn39McAflvEqThQRYKLO8IrFpyqmyTZ6F5f44\nT0JsB7II5mCNv/M80JtHndK48BQJBOJkiZ+ky32EDiH3hqFUi7sB0RYuQOws\nawG2zoHMzYLOIsyij3TTKmny1Q9LtOD52fVebLCJ+jbjQiG2TItx0GFk6gvq\nXB7d6L9X/KK+WZ3+0xN7zo9TvO2Ppfa8PXIS828V9wVTVijBRlb3iLwC236/\nk/iw9NG0SZ56B3RE+ZyUE8UZrjONCt8PcHObOfFMWEOqM0Ogd3LhgqudM+CL\nZV8+T5h8ateCTm3c+2zaPMOZia2MDVI+kBD/YaKxaHXikgEC8+7vkD7j7Fdx\nu1Ax0xxfx0WoXTCwbtT2TubzEsyrvcSvPVdNeJUqIIeKMZFzgLV1wCC5Qjn9\nEAkf4c3KoR3+ZDpRpfyg/GtlPU6wQU6oEPLYbLGpn7HmHdehZcnZDOlHgLRk\n+SLxta06SPm2nHnxwuM1QtZMDTGvPhRxOChOWL98SIGEDumQ3UBBLd71RLSa\nI2Fz\r\n=ysJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS2vNFCe5yIhI6seOhQAqzYrEIwtGQ2nctKWngrjN+uwIgVg1C8yGI4ZVclA7lHjJT69W3v/RQbUSbCAdALgT3JXg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.9755be10.0_1607023545070_0.9944935227616896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-dialog","version":"0.20.0-canary.3f64270c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.1c156d69d.0","@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-button":"0.20.0-canary.3f64270c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bJeWf2IgF/Y9ga9Gxqvrdce/p/xPj1jBFsRyFqqpbB/NHnjQjzZNgFz8Ko8gQ1bRp5uFlDbRm1aWtUG+s/hCsw==","shasum":"054e22dde1e84611ce39adecaeb1329ef6265bda","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2TCRA9TVsSAnZWagAAgPYP/1mI/NKyQBnovqpYbHUE\nH2d24M/Ta7u8CBYd2ktKzGtBJXYeTW8d0YlBDE26b4oPw8+6MQnmPWSl7kia\nylkcqLTw38fR+K33o/GjFEkX5qsKhQjNAKR3WF2KiJ+Qi+HsePQ6imfM57kb\nI7JKgeaYp6ARwSU9/YnyHjnImbKNMSQaHBIaI9R77xNxZ0GKBnEEQ3yuKnGP\nhgwvWLBmTcsPzY50nCZIBf+V0Pmy6o/PLdGJWPIRiYhRI53VizkAhDeIRbcv\nJfNJx+ut2UrJyHdN3OWghDxtF7YrWaQ14CURGj4vTT9U/nKLdRcH2s1gHx+3\ny/CRTZcYLk+fyyQuUDCTQUpCGcLkxpBkqneHNH8CxK2byv+A7SXXAFLOgRzN\nugI7rAqZapqOhCYUgQD3IQ4llHCC8OlrAYBFhyEv95zZdP2Dk86RAENGPbaS\nE957N93A08EwRS6LqDOTUUKXmMQIQ1s0RzrQFKBYyK6BlyeZpsjB9UJHWnJd\nzL+nYrer6hfu3kLgujxWcnQP5JZDW2SBAkZ3fe0OrGCikjn70njQMWtJrt60\n9GUPiX82+aMUqixf+ahDYP7GjJd/ESlkOwfVSRP1ZuyVQRjbchP6/m7fQZN4\nNrhjRXiU8fDQWPTCACHL+Of6STAQqzzx2P9IhyPTH3dHwIrWDrirMRUkLypq\ncRNj\r\n=E60N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5i1kowvktGf7dvYQfUzAZckwU081NodNKsDDBK0zUkgIhAJd19TOxmTZ53oONKwoZgqWbg9et5qpMvewKf+svQOT2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0-canary.3f64270c.0_1607032211395_0.42637738378853673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.d893b14a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.1c156d69d.0","@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-button":"0.21.0-canary.d893b14a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r/MuOFBHOu50w/sQtT/hHomx3pAaFyi3+M1FxzCtNyW4ifqpRWo++4hhblcIiIsQSa3bF20Il5ktAvZLH7eAFA==","shasum":"12ddac70d7946ffd6d7f31563f0986c5f361ebfa","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYVCRA9TVsSAnZWagAAAugP/33yw9+lTtq8iQcyX2Wi\n6G2QdGOeGrig3Z+FdNB+uUpw4evwvTF1I3yH3h9j/stquqeH4zJ04HPVLpx3\nwaednXw4k63vLzScVa9KRFoWpegsFontAeW1jmczd/eygDvRvkP7EojxuYFX\n3uyQKX7SfrvIw+wurUoNJ+dNfiaHRNrFtTrEIiMIm8PU9r97jgF7+Rkdfjgm\ngVTJYRz2PMlmyzNGS1nuKqXXfhPddmY+zKvrtE2qx7XHEaD9Q0HodTZrus7o\nzAZeIS2pX3/wsNHiECIaIebRz6i2dyFyyCjxFI61ubojTDUa5f2n1PYCIrzt\nXFzHGwzCI+xzopRltCBssfOz4n6HxA3Uw7V//NLbNSn5hrf3N8ICA5NQZNa1\n6fjjBAP+0Sq1WPYOGXgSJiLyyOU9W1p1tfaW0mhDFsxNqbJK/mrh7LFeAeIS\nfANxesGFteF5RxzE5M/KdS9N1WCtckVC2qsEGbqkr1rZirYfS6UAPTIFYxPm\nh/d/Y1Lf8Bx5RnY1WUqA/do2PqQN1NMa7UrpGOW3GLCEs9QGILezTIxHCrfb\nTVIGcuHGyFmEEQWzD77f86tepHL2J9IcKBrLKWx4Ij0PtojzJvNJrmyMdp8X\nuWQA8VZrjyTlIY7DWy9Fb5swsVfn5i/4oWQGkpY2KJsKV6Ty9EBIF04BYiaC\nPUnz\r\n=nv0R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDq+b0LhDg/0Qnjro0o7FWWJj3mYFIwck05uSv24KZUHAiEAzorNWFTlfo++275YTf8/tJd/dUjFUoROqMJz7Prm6To="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.d893b14a.0_1607034389161_0.42740622397175954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-dialog","version":"0.20.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.1c156d69d.0","@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-button":"^0.20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-7VG8M0p2xaqs+gFDQLNQiVSKJNe+j8jemYX94wxRMZaMRryX09uPrOkn1CGUAuAy0fivxVLhlFG6KINbGR/Avg==","shasum":"3169f71a049c61cfd53d16b761b8313645bdba01","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.20.0.tgz","fileCount":13,"unpackedSize":94283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWanCRA9TVsSAnZWagAAV/gP/iH3D0ODrvnjUmo3lnBC\nl4658c8YDDLq1AnzEVIxMJMGZ41CYEG8gkDEdcITyRb96UJjbQOUcE6exRpP\nxqHHg/b7KZwO6D9dxMBhNOLoSMU7uOmGSZzcUfZnfe73vxCaXqzh60JCBp3y\nwK5DCZLCrcZTy9bZSINh2hEJAWABg9+/SZ7n2i9vkrJi+1+e2GEP9iGoRbEu\nNK0pA5MyeL1Z5h7MRhCkcG2HAaO+RoEqOnDa49L6Ab3SrUw2iXXcDhoZHri7\npDOp56IfDXDR3/J5t4XIKRaVgFMFfqMjR6QP25mfq9qsz8tgwSTtoQ76Jwef\n1EANFJnDXTXdYrxjvc0iUu5TSTsz3sHgp2uirKJB9F7Fq8GnIlcGFVv7lU9K\n9L4prDOXc6kd2rQC2lQQ3s62a3uAOUKpNFCQMwkwQpQStNWEcCEUfreSNeZ6\nPOzm8kZP3cJmu6JZKFyWnyDy7wSQPzlULG80z1kmQ5mYeLQWp07WB8EEXgEM\n/yCmgwm5W5vCA/TFqDdXfuKhBdR7Q5EQeInaUc3lFfF6c4z2ycGyzGaQc/Sz\nMmcSZTDv2WxR6YociXRx1YzkHFFpZaTmnRhbtMM7KhMSuTsWbyA7N53J4DqK\no5FGXKIPGKkaNfvqRE7B6WvVGNUJSQcHaZQHosv06Er6aP6J4Gt5QwRTx4C2\nyadR\r\n=NVdt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDklpdIw8K8xszqDv7kKpVC1R/2/f9XGV+lsvIL8oCGBwIgIF29nllCV23GIgq/Wkf692Ovz0aDobtxLUgYaJwmlko="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.20.0_1607034535291_0.09494864786816337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.1c156d69d.0","@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-button":"0.21.0-canary.47c7d7e5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UoQxS7Xf8JgD7GkRjVXBV45rE400V1XymYVYWm30JCmD+pl6TRn+cjuDHtoFSosgNXpMNmrG54HnMsdeRQSdSA==","shasum":"2708378cad183b0f7845a150ad58edb42840054d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088XCRA9TVsSAnZWagAAS3sP/juFYJD0gRwW17bJTkhE\nuR20aDPxjjRiqWowDgFO0u42hKF4FkuWJCfDgIabA8YVxcN6sIy3n6uom/7g\nsJLS4pDp/XeV5MiOo9j2Tasxy1hB0gJ9r7wB9+44A6joBjbqq3+B/WetSFE+\n/flgBHleetv6dT9VMZJv9Y3AKpfgM3KKOtIB9ihp80iVWlC4bSwKghNUJfmm\nojiFsgSZJ2qVi4i6xUJSzfu/ycQawO2UFU/z5mH50e7u6vgnkbOKx5M+VMid\n4GDZPiLkXeKSam4V90AoZ6wl6joNhqQ3YcX+zt5LOjtVobLw0+o4r8bWUaxB\nXitVxyBP6I1ZyakQaU0BLsSUfrD99t0vBH/H7zxfdaw8rnRBDjUgewTrVgFu\nXX1FHNRrrhZNtbv05Gvx14FjnmbZuS41G++Cem71FH7x0pH6T83uwCX3u1mi\nDh2nqPm5M86pFf/HDdssza2Ve2A9tJ/+ytMaD4ZmDCq7fb/9sMlpkQu0fwtc\nGHJTfeQbKBrHRUHL8oZyZp0Edj2QguX+uCIRyByFy3RN/XlthUxLgwHwnDRz\nSdg5iseZfAN2rbVan+KQXZ2c3FKgYJgAXIdNh5cgTqqWLmwWI3dE/kzdAjLh\nzFShg09Vexqqn19gIKCzIzBV7kaKAurl/aMIFSKO21dgbMrg9d9a3RYbjyIy\n1lXl\r\n=WNty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHK1qKXAI5MD2cyh+8Fq1y67zNNMJzzH+/sL8uFt4rRcAiEA286fOK05gZim8nLGU/BGgCQsmOc2xmr5DouImjGfnlo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.47c7d7e5.0_1607716631102_0.7003043922250134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b304a78b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.9244508bd.0","@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-button":"0.21.0-canary.b304a78b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.9244508bd.0","@material/feature-targeting":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FroIdT/lpwdSUXZRkcCKHDuMEqmpKzrzN1nKfZrEAXc0T+reuqESxqVKg1hBtCFTUMeYET/8GHQ2vrWtZWlr4w==","shasum":"210f8186a60f6ba6ac07d535e9fb9a65f4d062d8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbOCRA9TVsSAnZWagAAOIAQAI1ZtJPL2Q+pSIln0bgu\nQb5Dd7mQbVWAfZxDUu096zIAvZimJbiqTum4ZZwGl7yh4fibzDrvULHXG38k\nXC6OvnV915Y7psfxyVN1gpeyOZdD7hXQXLEdKcu4OwNADDB5fZ9f6q493s+L\nDv3e552P0JiFEr0/68AG1dH3Cxh4Iya+x97oca8DEkd1IgVIFn1QAdzXMhsb\nths8h9YFEDWb9T50nl//gTeAVgS+2kah2rVjL98FuOAPk2azl2EZ7wYibSwE\n30fCLyzH7hYNqItCCWQyaULaJM/m38IvFcCML8qSqdYpVgV2bP98KkJG9dXU\nSUrIlEUBCktOzFzfXNcQhaF5z3H31Mep7nK07GICVrHXpUnGWpz6uMEXX0zp\n1gqn2RIzOWyh3+RowcDCMOFUKRf1FxvL1+P8aCDkHfcgt5Tt1VrBOKWIjV7g\nIU/5wQmMikVljJV2w134LF8rxusF1ITPQmyk1SXSn/CJFhVJiM8bkY0+ciNq\nhSl7HLpg3QJpoaEl+wJHtU3BFeqK8Sr6EiUsh+IKqdFlVNf8duHSpdPGUmWN\nKzEYoZYZad84SAGpqC3XQ9GLId8kXTtRXx3g0QTEapYlgt11oxFFPDwdVqxB\nRPwf6/+ck9nvctqWsQicGh4dD+QfLeNbKr70pauiS+mn5SLW073RIWO1xK4U\nW8b4\r\n=o/Tc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoZjDpd1QdK8fKBGrKJAL+zSU4Z/k9sRKhnB3iud1nigIgRq8suTJPM5ecVIQ+djK0+POiFZK1lUKC0TchT5NEHAQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b304a78b.0_1608062669890_0.6161904213391227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.777c5fa4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.9244508bd.0","@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-button":"0.21.0-canary.777c5fa4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.9244508bd.0","@material/feature-targeting":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xLMwqAA754lDHUcGjJFFR+1TZyBBS6fr5hfh6Dj8niIN7q1M0JHtkpkiH5FduYXaMM8u+5kTFdqhfpvfcn8zzg==","shasum":"2201cc6fe593f149b57f28a6f9d23b9ef914254e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIQCRA9TVsSAnZWagAAhQIP/0SfzG1aLbfq1F8/EjKM\nWT9NqTbd3ESU3QB9jkZvsOFiFVTcaX8pf3iSCctrsPwl86cl99GxX6XBL7z7\n5d7zbgo3vVet5r4sJiZMhEwmmAhufDo0mg1oF3uVDdnSN1459P/dJIz2+5kc\nmyITTpbK6aPuw93QH3lRvLe2DjtccuvZnjUPgFcCQit4Vtv1rC2DOf0Gajxh\na//LRnEQr8x4JVzhXFU1Cuyukg/a3SrQjUEmpS7F1gn0NHUxiyF1AVPYa/jF\npg4VM4BLNjK8p0i10OVvn8PzHXoHHCoIoEdoo6t1Hwioostc8tlYmQpmweh9\nifPemhgSWuTOImlCtfPVigcZzoUgaYIGZjxK2MDpEShDK+fZTGnKX/VAz4lH\nhSCzE14W33szC6HcT/gPWB8NCjkXdsMsTJRXpqgcbOKUuHYzIhnOLjZ5i7zG\nu4P30bACoPKxqFtZcB6IwttqvrmukuTgE6J/WOsNXvL3g7LLdqhDSi7FxiuK\njxzHy2hO9zJACOnasrYtSpLIlL3RUFIap5jMxQlVWZmWHt+OxMmQE6D02edp\ntck+lRxJM3bipx0+IYMhhAi9PMPeRmV/wz/rIYEmxODJ94SqO3+KgsHAlnSS\nLsoOkAa9mA367JT4uJnfNzudqdJdBQPM3G5+kgZepOeTBdvqHx6q4Ka8o//I\nThOx\r\n=Cjfz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEabfYMymQ8Fx1vcAehV9gXPxL2pHkdNcr/7XVFgABeCAiAs2/Z6lMXpQGZjxdwQCOdzD0uUt9WDpP8qOrux50z2gg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.777c5fa4.0_1608155663987_0.9683726678959332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.635c7996.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.30fdfd06e.0","@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-button":"0.21.0-canary.635c7996.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-REf5lZsd9+CpwYf8wkcPi3EWfES2gT5quQGM901FGyK/vScVPDj05xUZRpYukluKhxiPzyEVcY+ExoxVSeqhoQ==","shasum":"45b38fc7ad3f5fa252d2db2393636a5685a4d515","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+qGCRA9TVsSAnZWagAAc6AP/jvz6tK/8AT9rwMCRhpH\nRkxQaV2kBNLw340bLa0pOkj+qpzrlEGnB/4uqOz0YYlgFV3MN1lAyhS9g3YW\n8pwdq4mAjC72Xdd4QIRmazFbWFlZ5QBX97ikAZQabBX6/nvAni8vzOaZ0jvd\n3D90wHOuIFPxGKgAmUDBsx1/7zfIoT/79eBGvxQu0cg9mlM1PtuBgk2JMpdY\nZsxF5ZmZV+MGKZzRdsG9J62HiN0tMouVAVRHLxtSx5c94N05aBvodghqqsz7\nBwWut7Kc1GXmHBk63Bl3ia/C6xEXnFXA4+ODtBuQoUrgA39IdD476aWqidpW\n6sXPzOGwk4hYJTKMpF6SpAtRI9ieYu1x/7a05czzm8KzlDULJXg7k4OBV9XA\nrOTBwua5Df60N5zpJ3W657vL0uLUbXjFQXt6hcPWiA2VkPZp6QloLjeV5MI/\nbR/OTefuiYPb5a3vUbZ2D+EsIkBzp9Xg1QwcJowb8O2vaHJPOx3knRzivlfq\n70cJ+2OODJbqhNrnYVV/m70ZgLydpffhcKV1zkIG2pA9CMBiNVN0i+2xrhsM\nPj42MvjmZj9W+GxCNOrMTmoAc2I/i4yNoH/NOelVYml0SURfZTvMNFRgYuO6\ne9DAAbRIwjer4iAXxcnPtou4foKVXrUeeX3LX3ZeaGn4rBXxmRYtjqqKzv9e\n6Tnq\r\n=ta3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxkul9MgR/v8UK5/MUL2FP69LLXYGQZsrPvTO8og9Y5AiEAjpUuOD+Lu06DwApVq7ikSbLfNQk/5RSyGVfxkhOvNsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.635c7996.0_1608247941986_0.2504444252592499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.20b0045f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.30fdfd06e.0","@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-button":"0.21.0-canary.20b0045f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Eq2PdcfvtPrnSjSYxGZjK5by4yltUUqGpKbZJ98ziJfSLsYM/umrcdl6LQQCTIhi+nf3Q8W91lZ0v49RXMuuXA==","shasum":"6cdf16a6ea9f24055a26ea16322d3750a45f2f2d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+6CCRA9TVsSAnZWagAAdw4P/37mAyMlLEIRP6zdA8hs\nnQJ5kzx+IdVKVpRfAxd8JghazKyorc0nk5ay4gjxeaALnistAj/RcNoUgs4j\nYxh4w6YHg5/cu/epokQyraPoW616k4roKPJI7PHJn7STxvPKlmEQdoXwECit\nzUBTXBS1RIeeNaSAgMpWqxbJbsG2wTFklCKfpE+1HwxgxH4SA8S8yQeMLrbw\nd3riCiw22WVTPQOCCawTukwRlPGeswKGLgWnwU1R8DDgAiKFsbz5MMr7dX+c\ncbQ/nxoaTr2xUTL/ScnG8PbOu51PaBa/QdX9xyVIFXZTKd+grAIRU/doeiB/\nPIhfGRZ8+63jGKz3HaEgSj3eQ1401LFo6hAZBAgDRE0sGtdKeaIswcJNt8cC\nKrrRfWpcKq5mwhwkr5lvCOctbDNycz3GTF63kitL88bpv0swmZbS+Gmjo5II\nd02CqQjr/sHUP1vkvCklr8L4kaTXu3x9E+yc5GfqUoDtgf8zrWpluVyiqUIT\nU9BVlZSR79uxOcxB0rS51bG4Hcl/uo7e/5x0F/VqdS411VrnYC6I/E/N+aqG\nIQYHlesYqKrepJfckNLMN2VZNyEn+v6bvRTzUDKw1U1X9008uHKlNrtntfCL\npRbzAQn1sSe28P8/23PoNSmABF+ugWX6dg4MtqKZOXP6j6yMp/gQWGMEspyT\nHXBY\r\n=LYNs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsZ8NUxdfd3jGjE3sluRMY/2Fuiulk1PfdLk/hjDFS5AiEAzJVthFNthHvoKeXUlIAEHVmUYaHElOVzEFlj4bEcGXM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.20b0045f.0_1608248961673_0.22272915632126322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.41f77000.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.30fdfd06e.0","@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-button":"0.21.0-canary.41f77000.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-78S72ncjkqNsuHmv9E7dvOPaG1/VKbSzq4xPntV8hLcnx9zmtCD5ydd0NTw6Ypt9wL1z9V36SqhfY4X/qdy8RQ==","shasum":"c5843b13529db0cac347e2083a9a25396e2f0b63","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lXCRA9TVsSAnZWagAAgf8P/RaI+Mh4e3xMeIgu2a4/\nAKKHOiMXycd2QoLQtPftjwuRABr2irx+L8sQW7nBito5JlqkhKK8w5m+9kGq\n3u1hzU4iY/Ul3HV3qQO+j8gVf2eZ2ToKedG9WOLF6Nd2W8SoyjV6+STPHq22\n6jytCVYWkeJ6spkpFDRdZztxRQmnxSnsojWtSi4Os4Us4eQiQBWPl1fHz9vD\n5DgJz1CqquZ9/mX639iHkVw6GANkBmbAWDePRtVG9qcoQCjQ++TXv/POFYXY\nypa2B7Y/ja4ERUhXdJOsiJU25G/lF69aoC/whpDcsr51nKmw45wtDTsp9Tl7\nZko4jZrQwceZ9Ggw2bCIquHtyb4By1AOShVapOwWZKRnDJAfYh6F8w9hVGLm\nHA9k859fWSk5o+Q0KqTlyk7noLiCK9w87kYy77V5SlUaSUrONYyP2dijCeBs\noo7UbZgry6awLbr4MKX9FR4njdq6bn/6GSLHSDb4SiLontAQR363iAV33UmQ\nTHfvIo3PH0P2hh7l1FdQD4jewni42373wxJYhLIkyucVusxY1GoXRQjstLD+\nizEkl3LjsQkd07b0Irr+BObFrQhx8FHd0Husb4QdfYLVKKawP/wwibiOhnUU\nDMGcSJZU4RtyuI8a21r/gMlj0oocrIFKmVCYWhilrhAhewyq7Grt7z3h7GnP\nq3TH\r\n=uBKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnUUizrrRp22iYDGH2NkFbUZUlcBfJJ7IMV/Y/DSvy0AiEAmQgFoGrSqWiQ2nXqJa1/dli+A6ZgjhPEcYTrm3pi2AU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.41f77000.0_1608251734756_0.7063313046275754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.afe4079a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=9.0.0-canary.30fdfd06e.0","@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-button":"0.21.0-canary.afe4079a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ----------------------------------- | --------------------- |------------\n| `--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n| `--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n| `--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n| `--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n| `--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n| `--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n| `--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n| `--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RMEEq4XgqazB2MbBzbpR6UU0nCkAFzPAaVUETd8LEyjZ8w8lbbuOOjZUl3Zg+pY9ukGAtUASVClHe/HIy4MJtA==","shasum":"cb3ebec12da87167af179bd8a493a4d89d2a7bc0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":94335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i94CRA9TVsSAnZWagAAjzMQAIVJ8NDasgBl6hOJgwBw\n/+2Cuyy+WxNsgGuoqLV6EdEaQ5+ZRiUGvktZ3cNM+APeICABa7UD+5Jn38il\n2UqOBpYBoFXXhyZzK+EXdCQyYUQnir1sEQIEpNuTm6dquQUYg+yyXPGILVeD\nJB4W0qLmm57tnZ10pd+MXWGdk9YhaSPUTUSqVLFIGDNadXs4+r1BSeA1VRSA\nF2sBnyp/MA5Qt5pwFvX14MhhqMz4kVH0chYR3Ye43k1o2RRfGmZyicOSGkUE\ng5eYVDm4Um33J7UZ6JFoHddm3oIFoTfoE5KP2gib6xXbtxQ6r7xUDrILgSDl\n8MU7shJxVlI1W2u9mcuW6gqNT7Qj+9MpSk7DEBLuB3uKwFITgy1VBLdmSJG9\nmQ+AWp0J+D/PSXVlhjPrRzYk7d8vw9NcpwvjdiPbDbxaw4eLPCXzoBN4y413\nk/ZjzSY2lhD4KZ4s1nijdpcj2o6qMUabPoK0kwNFXHdpfuSRtTHeMpinjkD6\nMHe7fBxdWPuNzAu/D39dTHGmW7cccOPUMI/V5jm2KKv5UKOMNUVrGSzzg61F\nUzuwcF+G1sxYBCCWRq0kOi61diUKN0Vuds0pra+/gCm7aDFoRrdzwGoqQiCL\nTSAJyINgn6gM+hTgxJrHkMyFFkdOW7CmQKN/hG7cR4KnIJe76VyXgGOHEBfV\n2VDZ\r\n=VqVf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdoBfUTS68Voy2dDfqcA8cP+MHTlVBvgPdMLFNuoJ/IwIgFQ/4ZUH++a569oQ5F/0b6DELHJzc9h6WSnD8QMDE4xE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.afe4079a.0_1608658808461_0.8990910065937274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.407ef8f9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.671d72d95.0","@material/dom":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-button":"0.21.0-canary.407ef8f9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.671d72d95.0","@material/feature-targeting":"=10.0.0-canary.671d72d95.0","@material/rtl":"=10.0.0-canary.671d72d95.0","@material/shape":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SMe7EMfOoWa7GTxxmW0N3vUDd5N621y4U+Rl+98jdI5GV7qW/penDuGo4AoOftRN/5PSAirNQ+pd1b2jgulrKg==","shasum":"6a4992db76b7a177e6a217f16ddd264cbc057500","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":94769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcnCRA9TVsSAnZWagAAEFgQAJl1hcSwU3lU0tPd1nW7\nVushUWpD1TQGngO0hzHK7anLaXCgC/PngO+nYZK59BN+zjBPVRCmlKOIA/Gf\nXxWSGKZN+qeaFhsvK06lG1ALGRjYdlydyOqrf/tMkz5Ljk9wE8DEoKaiT7vU\nrMRQT768/xtA7whnZELJZS8JVf1HlM29BikGSGRgxpPKkVkh8080wN6pmc81\n5RSCNzr4c4ecxtVeYsIyuRlmGDa+3aXpeiTqEnTnRcLw/CkNKQF/W2Myhps9\nvbIi08ESADGrFgs3eJR/bBCgQsSFQCc9T9eCaHtQqSaiTqXhYAxCcGUY/kWe\nqChZ6UFV8Q7gaj5zYacR/MX8L8JmZPwk+QL68OhSp/1Ksn2E0/zrzW0UFpji\nLRX/aoVkJeEufhA0KS6HDUMq2q+8jyK1hFR0lIeTJXtVWj5CEfPrNPl/e0Ax\nHjpiHegYy80KHgqDlZPi5QmWasGsMiFO8vTXpHJGu/X4H+3MUYDnGSYeNBfS\nMuU7n0aqx2glVHVVNlIk/C3GtKDG4KTYWdiHi/CYF/8S/v9xmprXBALawvmF\ndoUtNUIoFY6UhRNFgHgA0ABCmTXGUqCOkzh2odgcOlxldxi7lp8y8baUlnMU\ng/NU6VUxQ2AMzr4/kFiVfG6dXWZDP3caodjXBKbRRuhhq7Hidv3AKwlJaQA2\ntg2u\r\n=Qv8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4RJ2m+V2wu4IrlQIA53HbGxm3R3Kg3ht9jDTJyuOoNAiEAjodYeNwO8Ur0EFy8+ztyq9+Lkbi9c0nuaRuAAQA1+5E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.407ef8f9.0_1609369382916_0.46936429345698927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2e26e137.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.365c69360.0","@material/dom":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-button":"0.21.0-canary.2e26e137.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.365c69360.0","@material/feature-targeting":"=10.0.0-canary.365c69360.0","@material/rtl":"=10.0.0-canary.365c69360.0","@material/shape":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jiXEvpZpaAoSpmic30QMmR9YTH0Kc+95S7OqeQbRfN+NaZD9wrURFB1GOWVFsk4yuaH9d1TkF3mEags0b4CnEQ==","shasum":"65f37b7f995e9f3b8bf23f170ce5f3d39570c90f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":94769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTYCRA9TVsSAnZWagAAOcEP/2RtBC+wdsG056/vtz9z\nSqkeIKRBe+yK/tU+uDKPFN8sH9TLDHOgbfcNqF09tNRcmSteMhw4AYHMlfOA\nNEReGfhbb9Tse3yuQFyJ5H1zQChK0j8otVV59vyRBHHh0CyqHi3UA7ozN396\nIiCLUSfJjYI0FpjIzjsFA8b6r4N4JgfEdsHDm7VXGxV6KYex5e/7UoEvjiDh\nvcjLqenn805l4y9qeXLeMmthTvw4CeB4CJcZjZkCy/unhD/ttoRweVtMX7lq\nG4UOKjWjdpZp7xEgGgnD8Al9NbzFzl9TRCp504mjnYXX5wtw/5uw2LU6CxyJ\n+cqX8pO36ihQuwW8tZlRyDlYsmFkh8FWn2y0TR/yBExCxO0vJp/8BuXoJwie\njcb8VqFJj8kjGSr+qVv2LWvoQlV8TbGL9uYG1znO55zMRjWLjKU/E7Ix4oMa\nVZSKLp3wHA+S4+cvMqX1bM8y+4wZ98j4qvdjXE9qaSzwFHrRft2iqc24oxdd\npSIqK+8X51sdV11tsHEfLh5eKjKqF0vouUcnKi/nIKcplUp4q51kkDqP4G2T\n/fI691m7sBQwKxNHoP0BwEmPvDqfuxvOJMHlxV16WlHuwN/sRqn1Be5CSR4H\nWko7SP2Wh/eotXk1m1LQ6DDvBWL6xXzdMT0wHNDxHq9QuriYe2y3RlqigSnI\np4p1\r\n=Tdq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtWhMmT9g0I4aDoG0xhYTTyqwN/CaIvuM4hNlA37RtzAIhAK/5BuDPZy8OmnPmfp0gugYjOHk6i+vgvISrkx27KBsd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2e26e137.0_1609872600419_0.035446702504912775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.9009f6c1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.abdd10065.0","@material/dom":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-button":"0.21.0-canary.9009f6c1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.abdd10065.0","@material/feature-targeting":"=10.0.0-canary.abdd10065.0","@material/rtl":"=10.0.0-canary.abdd10065.0","@material/shape":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kxFBiGTcRT3vM/Q/5oM6kVVu0biw6BBDvDm0+D1E5ot46z47TeRAqSs4/DF6ViaClMAf7POdaHIsXV4qz+E+og==","shasum":"bf308e9207626b717a656120ef39a021633fa91c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":94769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LiBCRA9TVsSAnZWagAAzeUP/RMPvdjltvhIMgo8pP57\nJ3XKTl/QGAauWJukV2EclnWNySjJoSRPXhAcJQDwfXiAZ1yw29jpSCgQwbYW\na1rhl8Ti6Eo+bdkwx57TvDhfuPv83EMYlahmuMGS9wti8v5wNFKxrz6RRw9Q\nQ7Xsq0Q+5zQjzWb101z/WQlgTbIxWpSlFtyjLUhMDmEzfBVXrxbHIJjbt9iI\nOxwGKSGFz4bReynMzZL7sad9+05Ey8USift9GQsnmTTNLgfUeXT1vc8Bszzp\nDAqN1HVYWYgSqF1gvJuV90r3so+u57Hio9iWaS/4uVlX+WYA/EH1pEINTFPq\ntzrlozVwTDNJBRNiM4S9PBaqGuizBvDeqkmMehTXEUiyuiqjGYTuU7RK3iaS\nVLj65r8EaL/HMSbLEWvf/Vlxrew6s3M2+EeWmKfu44BPGl+l72T1DvWVnuFU\nQDImBRUx8scaM+FvEKKNy5cU4EkEoeI7izSPSWxDy78GEsISe53k/0FyIP8Q\nn8d5rnVJrAgF0GfALdN+2VBVNXlkOdr+GqcLKbaiWtNZfpOuoARNwIRCiQwJ\nP/EOlCyOji6h8U2Bd11zUhCCvdsj7sSW68cKEw9fLQuIzaoj4KqPI211VMlI\nKvYKyTSCnnGmwRV8zs/vyF+YOW/jY8TrHKdGEW8F5U8mnbM0i+l+EEHEvPvs\n0tpy\r\n=IWz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOn47A57jhhsM1DZPL5/NqBTD6O2RNAJ6ITNUlZfUnpAiEA6ftr6CItMRRK/emQJh0SAnXRkGU8Rn6KV5uZQ8pDnEQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.9009f6c1.0_1610135681024_0.8474588626319433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.ee99b646.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b8a1a58e4.0","@material/dom":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-button":"0.21.0-canary.ee99b646.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"=10.0.0-canary.b8a1a58e4.0","@material/rtl":"=10.0.0-canary.b8a1a58e4.0","@material/shape":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5+gmsaW7DpS6q0Hko++sFffn9Mp/n3JVyH53ucrtJ+nJhZVf3Zb/5jIAVMg+/0vUx028ngNEUKFYcrE0aZaIeg==","shasum":"6901667af66cfaa6ff24bd52910ee19bdf44cb64","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Np1CRA9TVsSAnZWagAAzhgP/iJNcDSzCWQG8Vrv1ykS\nVZqzR33/fhOJkYAewXechWY/yG5/cO8A0dIUzJPY1NCTD3zUj6x0ye8axTiY\n+qy9o+j1EsdTQFbBcl2YTY4VCWpA6z9vKdqH8r8MCWFqygs/BljncvB3mgKh\nPOAvxM/1e+ecMEQ8qA0mD57nxfxpdQTmiJsZuzOltR4n/rHrmY3ks4KzflV0\nS9l99zdxIKwGqJeeKf+97AuzTIvG0hzVcWMAZRXe7+4fgOxwE1srw4e2Q1cR\nGqWKh8VkEwUCibXBZ8bKBbHbaOeJpr1poOh0vYi6rJHuqHHZvSbujQ7ynTbe\nGYFKiKkKtRY0yQx6MAq+NEGQa/JPt9Im6+SLyZRmKLcpb4nQaf2RgUdgApOw\niBBELj0mQYW70nXOwRqp+pEp26BsY3l0wgr4bcXVzHvYMQhm58KavYgjng42\nVhBpdV87N/mz2yf1o4mYccQgQKKeZGxUOp4ToA32Sqzwb1VzRC9+k4on1pzu\npHIKtnFJFTb+A0/NVu5hvthuyEP1qpdK5PnSPBieQjnzH8oyJ86Gc04gKHJv\nu0Xfxc10O6Z2fiuY9UrVsq1eAryLR+LbdCAxk0UVRx8KFC981ZrouEjKEzpQ\nO8qfBWjo7O5QFFWxzzxRE1ghBNOmkR6Ux/hIY6CSFEkPtM+6Deh3mHt9Q0k2\nY8IH\r\n=6l2r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTEXrOCENyLe3IW2jnNGlOFhhCT8rz5aq2VTOtNVdLoAiEApf0EurWn77FTG65FzCErZSl/gENatQ7ZPJALXufiRn4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.ee99b646.0_1610406517274_0.9615361396394784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.740ed33b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-button":"0.21.0-canary.740ed33b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AIpmcjZg+QqeISNCIyzPpU3LNYPFq4HtC1xXpoMtHxmz8jgZScDgI/KUJTpU08r1kmVTO/vPdt3HyNmbG+c09w==","shasum":"70eeeb223ec63c78c976e52bc364632cf01d4ad9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSsCRA9TVsSAnZWagAAymAP/RnF4mkqGFMk2J1iZLM4\nv22Fo9W7I2LuqM8k9lWOIoLpqwLEGKvRZ86GztEia+713gWIOE997xNYPhxB\nh+MFjL8UO6rrlmLQFk9OeCqe5Gd1GHg8bXlg2cLeD6nywU3R7LGmqXvocafx\n6SJH85JBrZBmp+ql+lOT+N0GOKfZ44fXmry0qkEpnIIFj5+FxkZh7GhKyxA0\n9H/Gh3FNbLZ7WOF0kRYXYbvdAxidvVb34Bq2pMojobQDUjqj0yE5UT8ehIEo\nYytDwiPOA2kYp0FEGx/ZYXFCvdil8tQFy8KdJqdREs+3EWLV4xP3qx8ULd7k\nZza8934oX4nNbm7hnHcUM0J0Z47htNcVvcK8zk87iGqmKXiiEEVsBbk7uabj\n4HfRhF0PBa58l6Mr0+qV2Mffhxw577otxrw6b1a2RvWd4vX3Q5yQp3g3fkRK\n4DKlhRERTqfj/NF+wu2eki9um0vH0tgqFcpe3dVC40oMihqz9hvsJqvRfJqA\nDBggsS5Wb7jzmth9ei4QC8UlO8+OZ9NPqdnsNyh7JlCXkB2aWsXrrEkTvVph\nR9SJ3NdE2WlGYFEutzpeiPEduAF59Upojqhd6vkRPD//JA9ZpSYPokboHOhk\nUlN/0D9qCF10rAxDVZfhOQ7zVcX+8rom0OcUP4L9OjmvyfnLCwong0+LeRKU\n8HoI\r\n=/es9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBeXepF1D58eu3qiRAOYS6qYJlXBEpibCOdEzD9MCsmAiBG99eJ0I03giajumcKb3q/0e05xzCGoagdxFGwXe/v0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.740ed33b.0_1610474668199_0.47536707753326035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c5c541b1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-button":"0.21.0-canary.c5c541b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-X7GBCRHc4dkaVqg+uuD5jL0C28+Y+t1Vhn0apkP3peInQJZWXjrd9FCw0mYVT/lj7sfsuhxaBRkt7n6NC8Bl7w==","shasum":"3d6d07dbc0e0156a86ab94d0dd27c19e1f8f485a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5mCRA9TVsSAnZWagAA8QEP/jEZj2WcATJAxHPL+dCI\nG2a1Uowy0FcDh3dlm6UADAoaMiNVVDWgjwObRlAY1tB3yojVn2Q1dJpUxq8W\nau39bjRR66RNvbhG/9iZ7UHeWTx7kO+ERmkAynfv147RBEqHNhsqcTnLELJJ\nDPmV1ljuOUZxrZZ2oP+qx9jbqmVepizIteSAqqjoyZuHdP3ARmmsLfcvEVGJ\n0i5RaQtJqqfI/ENlbrIeyGmEpl3R3+4Uk1EVoCw9sRg5MHKxoKdQ3KiD7+Ln\nsQqyDQz/exIELiQuPpB0BpXB6+jiOkC6UZ34iW0SiiGcThBB8v3/tdQSaxsV\naW+QN6oTQ6N/uHb1BjjxZq2c3dlh/jRqp35PSJeW6u4to+ZitG8V+d98FCVm\nl3+oDZwssDt79MiWkhR0KmuO8aXQjFd5d6PZdegoaDWwT6AV/D3GM4zIlZV2\niFBWScNnwbjw7Damng/4IpHYIu5WIxqNUWnfnyavrmssPUvJRp+fmfpKBWPV\nj98OdZeDywsey0KMSmMeuCTt21XviVJciBEfd42zxZd1QWAYxz1QRbDJIzNX\nuRbaLM3DLmESJOcbvf5YgSA9zMTCvOsPIyuzit09w8PxUMgn6zjz5I/qvngi\nxmdrQ+7cHixWyanHdULUMWfFOF6EGT22dGUHBU3LSCQrEQOsjyG4VbIHBmex\nTl/X\r\n=eoc/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrlq8BIWwWVWrh/yCwXX+gbqvsxK4ApQ/viPyXZ2J9RAiAtHhLBvTEyzXveufZ8l1/3n0idMC1yuYqUxps/pP+isA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c5c541b1.0_1610477158421_0.5061562166714719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.06fe9d90.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-button":"0.21.0-canary.06fe9d90.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7PgxFQ1DOV2RIhlCN7JyEUsoaWjk80fMWPW7ESwwAPRqAgxXs3iweYqmNBPUYyd0r+NoE8UMb9PCv/QANhE+IQ==","shasum":"d1da7e11ebc6ab89c46da1c4c28f3651630536f4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gy4CRA9TVsSAnZWagAAGi4P/jSANgWlN8fx5lHOe1rM\nmqpPTdzLxWXmWYcLFfIrDBoLoaATa5YH9Nxm/+Ia7YNIbuTPixdhWB4Mi3+B\njnYELm2OTz0uEYb/XRMJoSrtCdU1v1k8JLAM+DszGdvRJoc0xSwFKLPTrLhs\n/goh/fQNtRqSqEOTsWDaRlqFc0o9Tw7gqG4jy3IxV58y1hnyi6svTjlQaAux\nFkhJwvn6aV/qLfS0tKvVVQYWRgt3v8BB2xv9oxg9XqCNk2QFBCiWOdnw/s1m\nb7M5cSxS6NgnrbbWnrUe44N2WivLBryGY1JiSTOKCPgVbbSKkyvnZX0nfIIy\nxcb7nK+aH2rEL0ijeglRcwg3ZbikyaxQVsr4yWw10zmIp7BV2/RSxah/kby+\niSWwWkctVIESmhrPIGpyqFAr/RJaKz85u+9gHMStcca06ZAWbVvtSVR/Tu6c\nV9FAQwVaZva8R5vfwDReCp8GQ6ZnDqeBDb9Nh6H+BWFZ8Z854qGKcGdZjfas\nrnWSbz9FksjuepdRLhmzbwTINNxCVdyjqejFUl+QVVnjZyMbInd3tuEbadXs\nLrmbuKJXVYOsqqkA+gMSsHef9uY+OepLhzVEYA5I4+Yq4AB+L7Eq4GzBv8AJ\nC+X2GSJ9YT8oTyi8plHY1Zjty1Tv/KuAfd2UIG9OGkCf0c1YEHYR/ddmTvAB\na2TT\r\n=ZK0d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICedv5nsZaqU1wy78XTAXUbiqnDmk11chOIeJqnKMhryAiBpxWU0MIM3cRyQvXjvgOt9KfMxhI8hO3HuuN/tLpyBrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.06fe9d90.0_1610484920498_0.6306041835601675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.269eed01.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-button":"0.21.0-canary.269eed01.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+GwelQs+9l+BObalgLBrz1fbbAjC8uirfVTna1tbw+Zh9E5YZUfytFJWlW2ndreMi3YfYTD3+OMwTjhMv4D/Pg==","shasum":"9c88f87b1427b664176d7a7d73a099311dcdda5a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2oNCRA9TVsSAnZWagAAhq8QAKC+4d9igy9Mc6A7xtXu\nMS705aF8+UGQZN0UF99CBBOMvW9p83lc1gOc0R0yCEahJE0OpY0Rt0gG+Cln\n6KwmLKdP/MpC62/ToaF7iLy0AzDQLfpR7d6oK0VNcZF3k0hv7qhQCsIMb0Tl\n1uGPxkOC/+5j3VR59Ie0Wun4mZB6lx4MCrTRnGBBl7WZ8u+iSs4bewyLfJiW\nxHq1gyJcKdhIPX0YiCLQbph8F6IdwkteUhcVJhCd87pQNm5fUmQJ6sd7mHuT\nYNHG9ljipzH+dXcjWrKlMjljwMkdNorxyKRLlkKOC/M5fY198VQPOy+va/zl\nBYStVoOXhdg5OqON7jjnKMyv1aAftOvJMAXPUnmNpxSo6ZAn4J0j/X0JvDyZ\n9z1UqMRXs7tF3q68IKqxfhFeYAMryJNZQkN/enGveJH/7lZLMAZPRSEm+IV8\nvST8BFzj+NHM0nWubKoK4xUaL7opdpyMahDCEuMpbi0FawJ+kcx/pz4aYIv6\na7kmyoWL9cwY95IrOz5+kR+BicL06vsAv9bNbLoiBLF+kM8QY0PtMIlOkcg8\nGZ+EZPKXupKgLFe6tFip5132Ar4OaDO95HREhh/eVLcGaGzrvGyAFK8dhAe6\nyR2WQAdyRA40igsDPFRzZV2AdR/TyLxqxy4ik/V8PPkD6+v1cT7vzSjhkQOM\n0+rN\r\n=6byt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiPVf60KgaCf3NhLYxAkGx3JKEd/ckqxKYO38eucE9ZAiAfy1Ausryd1dgq2P54ri/eyG0W39Fjyc5lq4RDtAVxfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.269eed01.0_1610574348912_0.4061870256575215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.8c075f35.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-button":"0.21.0-canary.8c075f35.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CHyq0/mi2txOgDkT7tIlQwCD04snoeX8DGJV0huBP5zWssK9s8UBmiLLVUjlKKhJmfbz3Hc50DQg7ydGyxilgA==","shasum":"1604684d14023b827446cda00321e8fe01966a3a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/304CRA9TVsSAnZWagAAy/sQAJ8LnOx/I7KSddsWptJS\n5M6wvmovRTkE6USiMk1uVjiBrYbxFzjcbMqxwG8IQ29WEhWbD5IGkhwToaJk\nIbF9C4/k22Ic6A8knmrCRgo67eu69L+hIApvGoeVcJFuRtauI0OcLzPZ3FFq\nNL7erQQENEd07vbu0W5CraAuxD7Qoxnw/4uDgP+0UgBDOx0whxN1J73Lefmd\nPrMJkEtnu/rk0HPhB/NoxlokUCmRzgnsRrkCO9GCTnYuhdFFrCFPgC169kVR\nEB7QngVlCEMG1cW724LO/l7P1dqQPsi1G45SUyRCYLdfRJw8fZWTscAJL8uv\nDd5tX2jTG5+QsXXZUHcM1Fr1bV/d3peLRYu2Li3I+8zypqewUnJu9wPluc2V\nRbLNlyJGNCiHUcEABNncj92NsTI9YHTgbl0KmhhYo4D0hmZO5wB+ZjJsiWIW\n/UkOa0wz6N7/rNT1Hyc/QEJ5mIY5qUzEI2Ng7FsfdfaCRea2eEOHmfH9InNl\nBVmKa33DFY4rrA0pX8LfOddox75GdoIzV7SNpQjNl1pNF7Ng/El96ysfGNGR\nPUne//z1/tdvHunLKrGLwuK8sWPSHdE5EPrETVUqbJTevtEA+Fw1bcD3ijcI\nFtuecG0myDyJL6GHR3cN81Mn5TW+eGHUiK57NG/cP0pIibBQlijR34uCYKcG\nvFCX\r\n=3tT0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjqMWlOfFYHT2zSzpONSOYVZ1qFCP1N/kZwUjSZlhcHAIgIpXUHqk0sEvIAw+UoHtupSZJD0nSwahtzo4Ogbb2NeE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.8c075f35.0_1610579256025_0.684817386428076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.3cda381b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.7584267ff.0","@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-button":"0.21.0-canary.3cda381b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.7584267ff.0","@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Z4vK/v/1mFaSP/v1sxXuI53tn3+AD7KSekzZ4JpAek+G5peU2OZ8hqdEAjjwHbESXZGYGzv78aXvoL3QhDwnxw==","shasum":"e644b35e494c79f42860875440ed50cd8ea08a39","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":97904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qnCRA9TVsSAnZWagAArL8P/0z5ycG1MsyN1o42C0XC\nI9XIt2M2vHxSwg9A8vafXbLG4s/99jFBmY40m5y2ls2a4Dmvx1WwkehpDIk6\nN6QIDa57vmRw7PG1iR3xw0vviK9bYqUL1/GY5E7ZONvyTickvAP6QIMq1J1a\ne8GAeHQrWFSH8rNx4Uzefann0QGjfqT0fwxt0DGYt3ngh4zG5wgNMD6ziN+4\n6z1dFIhHBI2Is/a1Ga1PUeTpmMUGlu56z0bihEC89bdrYPTHO4WyCqwhIP23\n7BWKb4eSCH7Yow8UpklrE/5RTXUBTpMEhf/jES5EjbACWYnsjVAAB/g6RU1G\nBCRO1vWoZUicbV4jeY5xmh6flv2rkMCxZFtvL0ck94sZY/RfzhnSh91TOJVu\nx0Y+G2WNW6qvzL4kpPSA/R8VT+G7oQ1y93zr1NrkuLwd54StD67y75L+cimh\nCJv6/mvDXabq8UtADsMkgvf0ogUzdPFXqckEAPsWI8ke/OFSdSi4eomF8380\nziMjJm67XjmC4rG4w/FSWzXmRfgwtFZuLk8CNWfenDnrHRG/nrbswj+KESdV\nBqotqy3IyDoOQc279/OTxanGh9TAItNQrWRS3jwfRKcbtjbbzXj1lpu+WJsn\nSFWw39ANUC9sxm30XoG4HDgVmMH2ethDVEytFFKOqfuQvlf4wObtxRsb3Sa7\njJZZ\r\n=7mdz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8wl9dbbutwKkIyNL/00gx4To6ASW44zk11f/EDX1sHAIgL1Q1A99D9Y3mT9vPRa21uWK+CbW4s+Gfi0LWQKYSJJg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.3cda381b.0_1610582695458_0.7296644647438217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.bc113605.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.772cc1068.0","@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-button":"0.21.0-canary.bc113605.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.772cc1068.0","@material/feature-targeting":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ax9MkYQ3Z3TbwHN7gnCRC98xCEarXM9ij/IgVNrTDTqaLSt3ftRaaRtKTElGkpydObdJKcoxyvsiYUnPUC1GIw==","shasum":"475ca76ccb197909e27851a087a0e78090bf40f7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":97904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5Q/CRA9TVsSAnZWagAA+k8P/1ODv4uvU8fVqsn/+McT\n2wnA4N6BO/6paIPWxNryEPqLw2d17waXeP8Nfjx5eWkpnkYsO0R0Xa6jxUf4\n3NLDWKlxqCp4o9CLk329I7l3CL9flaiMFhsVUC3ABIwPNakpZKJ0K8OBCe9C\nM0gJeS7gmzvzoG28To7227LV9rKYfUBaE98PbMVpaERjAwGveIw8sYt0m9p+\nModJGPXt/9xLI5mjHluAqM4jrvgWZr+o7v+tzxkKn22ReGnbJmXqX/hyf8Dy\nsUfZk0ZM7nFxYt4PW+s4kXwBwFQ/D34QsdWDbwk9SjJIk6W4MBPtzY/nxsiI\nRbhcukUPJC43LyzkleW2DfT7rJ4WJ3226VpVDWj9Q07zq9ACTq6xVOr0SAUS\nztj5B4SBaSQxF3l+wAMlj9gtxxVT7gLiYo31mzhkHA7P6Kic6C5H8rlk2naY\nAzOp6Twh3bXuNr2CL4/kZcVlEGhq0y3znmw1pHnZ2FHO0xV6Limsso0eItIG\nYtaRyYW6SPrRFjfr7F7D7Nf0n9O4V6RHegTJ343JuSFJq1yxxvWSxmwVSRPO\nebiA82y+5iOFD/6SIdz8iYJbZcmXGL3hhO6AKdFbQrQgl4A+nFd6eXm7mm7S\nLeGEIBteHz6w6JRgsNLYG9yBXWdxy85Z9dTw0j8B5N+I/Cuq3ODReRKz+wpS\n0OIo\r\n=RAZe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSewb4oo6FmKxSjgdWr843R3Lzhw+OKzDDBmzvjAZHzAiBtRojfPW6uPcGoWoyRfvzQceT7CHZr+qvHtN5iWUMgfQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.bc113605.0_1610585150685_0.4256428843856537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.772cc1068.0","@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-button":"0.21.0-canary.0c1d6ff9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.772cc1068.0","@material/feature-targeting":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-L8/gdaWZKkT3SvqrMmjHf8e/g15YyPUn87BZrCgwiP1i7hBLLnQM6IwqctYH/wEc3EU9T1JaYn5M6KajRllwTA==","shasum":"96b789fe4fb670b5142121aee3a4d86a5df51aa5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":97904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfaICRA9TVsSAnZWagAAa/QP/3Xoain24Qom7rflf/o6\n1fxo/WnOtY+U6gqfiFBn4TLC5JxnERnkS+cnBq6zFnrkM9pkwm9BNiUIJ8TH\n0SosmSfm+zP7bw65H6vPDndQrUFaOVV1FdEOD22DmYz9il8NnVH8EUSkdIUq\n57BQmWItN2f7FKVcPT5UdFW8TLb9xZFHXP8AeS1uvb2KEnHuNHGrHXZ/cxag\nVyN8+xFOruH12bn6h31qNaHvzbqO5Y81rcVADVr0YA2OT6R8wQClX9CgDXcu\nMME7B23scbNMm/gZGnbZ9Rh6GqSezJToRsYyiTMgADc/oLGzmGDdiNvaj48N\n0+asMLb7sLPcnTgPkElIN6d3FmHCT7eTEFu1D00b/CkIjFjr4JVb9inQMJk/\nSX7ml9Q4cA0+bOElAoC1420/dYOTtgt2meyyngt5SdQ74vsieOcLPrV+sCeg\nK8wg6SbLtTjPVFhPQJ1A3h4RT0s/GFASWyQiVTIv+xvUYJQyBTPrfCWTeCB1\n2713Mpz3v23IDnRrApvMTllxFpGe1m5d67eFiPb9/5VIdA0s1zqwiQ9vn3am\nwF7emZ0V+rmrxGNL51pR/y3Z/pZGcaUkYGwjOLH/uR03jeKGwv7jCFz1jFGH\nVPaeSZ4WcODuGfwrqIIzNsX2nP/5IuZU0cBKRAQPReGbeixv0cg33ZE+gtVn\nmHWX\r\n=ymzm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8d/8XGEJAuLnE/LEu60XgchdHp7jf42FZbaj0bspFIAiEA9XfaVYHRFAr+B2RsrSJCrZ4bhRQMr2SRHhXLbS7XDaI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0c1d6ff9.0_1610741384173_0.25536855288626037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b4332e00.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.c7c5da28f.0","@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-button":"0.21.0-canary.b4332e00.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-9FTDfKInMBOhfNxPFc5pfKfpxzyWJz1lzYsc5HTUxr8riTLk8LPQfVc7qi36n97BADi88uQYnYSC3UtqoQMjkA==","shasum":"d6341b166bff4259f552142d5863f38a9a521f6b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhI2CRA9TVsSAnZWagAAWKYQAJavPdLCVSaHFBQJguLn\navRde76mVFtnKVDxhja9C/r/Xj561GAcOHBk2QUqhS/53X+DB+x6Y2Zt2bSF\nHHJDk+irfW6BQZF87P5rqjcK657i2njwF7PQlJlO2qdKWHiFK9piQxOmdV8r\nmbaiPWKUHO2TOSqr8WYq6PnHXzIhQabRu/gz3AWcJ4ndGRtFm1WqWTF9ZwLX\n8hvC06nGsIodggsbOOoPD17clcykgem+FA52aGgrnI1jWsiQeN9ZZ+CeJU16\nF1e/mCjH1csVvh0OVoHRoZPpSZdEC7Hyt+tnyY6dnSa2ypgL9Vss2Qcf6EtI\n0+CU6mJlxY/Y+ABu6VeH247ya1p9p6S2u1vIuTnGvdNzy11zGuK+xka0DBMA\nGORQRwoNh8dffCC+9a+FuKP2TiCdQVENal99+7gbeLoqSRTJ4ypcIiGiF8Mn\nQRnMkkHpb+Ki52bbQG9gNA9q1yUuFXQ96cdreGtGULxf5WJ7NNhmI21fpB/L\ndCQjOr08FkIo1Pfx8knWGY+fIhWeNi6pQULR33dgJXMHpNHacPbgQgSLkFVM\nkfmIBN0cBQ2ZEP7bs8sGrw0Wna9i1kCFp8ulJ4op869NhKaXB6rql2Wz2czV\n0756aOPWIlW6c5z/qpEtd4gwdy0O42k7WEFrg5WoNLXy3yKTMkMhbmqtH/s1\nUqs7\r\n=WIIB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKFwcfBw/S8S2pOhXcfPiBmFpXXvqhzQKukqhGc1NibAiEA72GjB9ONrQSBB4UlC8C3UZ2cGhKdEFlcNkBDYXKtGV4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b4332e00.0_1610748470170_0.042748480729468685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2899691d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.c7c5da28f.0","@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-button":"0.21.0-canary.2899691d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-BZ4xmrxIpnbaaaBQfB3Zy92DzY+94EGv5Dfhu0R9AqD1tte+YUQEgnk5QpNtbF2+Pn6l/uajNuy13yyhN5UoFg==","shasum":"23f3ffe8f95672ba4fceaffc4c4a8efb5ddb2152","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUdCRA9TVsSAnZWagAAzU8QAIIfoRHkp+6brFBUjSNy\npvVwLxK3q/MoWybDqJ+zvNl3ntYIZNXdILn3iDZvVjeU13p91aUWzhdE3i66\nCZEwY+pdN16pxcUz/UAIxRpcR9diTC5LDkYFUuOQ+UIy6veiB3PN2iZQONvn\nBIfa+bRIz0EzucLVv3Y/RXmsp+6PEMrIIr9tElvyMm4/CDpEkGSPE8s6TKis\nslyAodMbw3r0bNQ8S7fkzaP3xDhHYdzMXtCTHnqxT1j1//HCnke3hxp2H4w1\nwA5NInA+oVz35HBS7nfYBWbcvQHSywFrn6a2mcPkKvvtdbEeoHWpUUmJajVC\ng+2ADfb9ceQB/MwtRiozRW7X5c245I42jp2dPlTNAxoyJJr3exubInW5il2F\nppbKZeyMUl3uY7yxrRh6b7+riQjNsiR9CZN/uqrDqcZBTPLFRXeIQK7SJUqN\nqvBah4s+vD2dTnjaF6ivIVFdjHvFWZpCICZ3ROx6JqDpvzjP1QHh5T748S7Y\nsjFHxFeuoYii3vfK4srytNHTi7IyemmEZ8/f6LRx29WAGkgNF2fbTyM1VoSG\n+68ImnC6nWVtLxenuk/bop1UYlKXT/zvJAdBxv4ccVfS/I4QPIhG+V5WUK5y\nIUX5B24ZMXhpsTlMqsljLdtQ/HN4c5ZIAvIT4vzXJ9LDnZ5rdIu0ILFkz1Vm\ntUfP\r\n=fQ+D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeKvVf0L6K0lnwy/YgCpOubZGj0mDME80n083vaLqSEAiEA+9FauxN0QLnYgTy/P8NHWIRYCUb6Ad4mOgu+VAlq6lk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2899691d.0_1610761501468_0.439361259546726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.fe73953b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.c7c5da28f.0","@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-button":"0.21.0-canary.fe73953b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-g9bNvMwBQY9NS47q4nCg/rDaNtXkJcdKgPB9BR0gZWpAimQFLyEUrbfne9wQ/CGqHEN7QiCoUNNvTaJ+R5d3ew==","shasum":"0361bb0935628f92f9ee56f87747a61c4550c416","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFNCRA9TVsSAnZWagAAkrQP/jmehjcCZs14wuc7dfUF\n1MyZ99QCGSOZkrwkgaNxljiIiTk9nSC5n9hOp+xiGqBLhDGGEleh4PA9SOGp\nHQEehuM1kjSf1KvJM97cH4NsAdmLf87hd8fic3VAJg7zfwZke+Bd+IP+1OcO\nXs9CaEdFwamHoJKqWY+V2pwbV1x8m3b9XxkmX5N6mG6K11RRJKrEuMj1lRn1\nXysvvYJumUS2WgjC2vZNEGQXQvo0QAoHvlna25QYPjE+gqqq4Ih2VkiX60vk\nzvZls//Iaab90gISHSPfjiCtvWZPxEeZx6X/Q+EdsBC/UTqo9jyb/OmE3NNL\n/uX47E742T4Zovr2TywnHpE95YqgoeJnIJQ5noklUugEZ1noNZtK+BvCw8NU\npWZPdY5tDlraTTQu3/kKAdmfOp7+2ZT+q5mkp/pU31Rl0q4lmIEqKj7dVhll\nlkLcIxCK2KaI+XaVsJakFaOCb59gWmwbKUpHcI4vPG13lSRG/abvlm4sAzw0\nqyldMRTkXayJ6h1Z5QFo6L/gWKjBRhR0iqx+msbSMvPdEgd0vRy3ajBaK9bb\nsBn/WHGQMclZka5yWChIIQ3cUhXZQU0e3Hpdc+LvkKCSQyHKpYGYaishyZ1k\n781fzi0yhaplRjmk7pZwfX+4Zvw7DqlD9WSl7rJZXRUQpUg9dft+aqiS+pIN\nusTT\r\n=soob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdsgd51sNHg9bsy9JRZQtQ7NOkFpg+AAa2rYpVoBe/EAiAWbDTGCrEBtB+k+pbji5HA+DNqcZVhdlT67olQeEiTlg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.fe73953b.0_1611084109230_0.17169927963036158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.d3a16455.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.c7c5da28f.0","@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-button":"0.21.0-canary.d3a16455.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RJNBa7jBKbb829etdphv1UjmWBNFbU2l4cTKA1LTh+v68s6vfbSWoEyFrfJI+ugPyHqmXJuB16i8PNg79PbBGw==","shasum":"2e75dbbcb73ac4683ac6f340857f7493cad11a64","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziOCRA9TVsSAnZWagAABDIP/1qpWBQczNwtuk6XJStb\n+YuFffOIhm0DrhOYBPdBPftQlgOxzibo1VYbAyxlUrjgAQv/Me4zwH24CHnV\ns9zJ63nFV5sUOeHfBB6S5RSmsbSHG3VOi2p6rxEJAb6K4g9rfmUuKdNntEIK\n5BSaQAith8NqtwnRimFYjrU5CSZNYfr+zY0WliwS6wJ2RghyPgc1qFXgPY7+\nZYVvg5/VMb+hLG6Krcnv1ZcYyVFhjwI4C+GYAqvy5AaGl5ibjbxmTXuMaRJG\nIn/oNW3SH1kjL5Xzv1SPKEMRnHPFpBUnV/u/diDnqsvCHsffNIVBoauFWiIf\nU4vcYOH7pzf06pzPzbVwTRrFj5eY9p9SAfznlnDe9VsJOBKgPY5o/2NofA5e\nXiVNUYqQoF1pKvDZb0mLbyFVbt391fbAzqtwj3NvK9QT1ooyrZc5lfXo9x9c\nJTAssrofSKEXhh3YNy/alZPMNXVTWEwMqN4Y4V+JYuZBKqut9u3m8suWxIvL\nWxl8Q8fdstYeOGevn71nlj32V6aFCi6gcrafdnFAB1pnr9k4KUSHY5pUVmBc\nT6spJELl527UDXJNbMgvBnl0ZTIcUImDivCfS/sTKOW0MDu74hDikR2E+5Q2\nYY4b76opj1CCSJLxkUm+N5kN+bUUsw0oBG+dC7KKICtMLxxaSWsvm1q2xUPI\n6u7o\r\n=SNva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0lHa+B+zUmPiuyz6o3+lRJALQ6vjvUtWgTZy45NeXIAiAdo6A9sM99Ma/g1ArTwVUIVeMR13/qvwgSGsD/0ePKmQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.d3a16455.0_1611085965939_0.9335572034584709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.597ca1b6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b2faa116a.0","@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-button":"0.21.0-canary.597ca1b6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/feature-targeting":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-f6zcHSKB7fYFN2SfPRz4Wp/yQnpGBVqXfsTtG4ggC/RWt4C/l7ccvJWruJYEPMmYiYToHnqkVSNSfUQVHFvt4w==","shasum":"8162c1e6c498611883bc5ed53e0944f2029548a7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CoCRA9TVsSAnZWagAAKdsP/0GbrMo3VqMwlP7kM59t\nEDQldnAE6oZ+xV9c3a/AZu2vF70j/IceM8+AQ1dz+4td4BCZZQsxrUKKbZlB\nZr3ZILFg2ck3mBpzXsLngEPCedaL27dtK2AMiPmdq52Ku0hXv2IV9AlsaRF/\nfc5+CcD33GDHU0sG5WlEE6lw4W7/AnNGH4I7/78IcyvVk55gJXUaYALvdq19\nnmmCya3X1AwlgrtzuVNcPJB1gqGfPiwUfCpFtQ1ziBgK7HTkS5r+GL3u41k8\nCJq+yag6/sJLSZtxwgEW0egQ+QTktduHFoE4c0CwD/3DH5rT3y6hqw9+jO8T\nh9pmVusdQE5wok9PeoT2jSwourfqckIPCYU3X8hya2jKMacxq8x44a9tQux+\n23vcTCrpuH8GjUDQWObxQ4mhlgEN+0SMHBdY1NTrBf0pTM5TgVq8bkTjqH1l\nsYMO+Exs/qI9gJEZPqfk8LQz84hQetEWv6CM4wY2wNFxObs5zHwsq/sOwLeS\nYitw0XOuvIbrO0XqsJt6nVPieD9z2Uy1ugsyUjJma3ztqswPYp4T42gpg9U7\n3psLdYXqL+q0pydlcmLBBA+L3H6uThhPgqw/dHgedvMSHe35D8xlkajqUD1o\ndHY5zzuVtVN/ZFq0apsKW0UzqxXQUjTPHu9fSs3W31unfN3Khi6Tvdj+Dn9H\nlH83\r\n=e45W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBQJqIwrgA8sBNLEWZE2y+iVcHLo5r403muz9gyzSMRQIhALLBzMydJBar1VDLs9GVfzMelmLIK05yy1pRMMIRLUM6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.597ca1b6.0_1611104424044_0.20096969913845797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.3c195efe.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b2faa116a.0","@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-button":"0.21.0-canary.3c195efe.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/feature-targeting":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-o1oLGc20YOzKL6sf8fBoQnPL5wG7CN1Iym0ckZOdexBq5TFXC+2fiD3qJVGeOEMkIMtsYrf4Rzp09pt2/yqDNA==","shasum":"cfcd8945f5f69321fdc463688afab588336d8858","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48TCRA9TVsSAnZWagAAPxkP/2u5PnjrIWkquyAlO5Sp\nyPIKVLYi5iioDdrcKZBJFX+cdMdzGMaFGCwVifyJoRlu01yX7HN+NhPT06t+\nevt9QGkKMByBcY+gldtMpgXBejKgN+8WN8SVm7YL2EtnEiQ6sbbW/GIPx6uu\n/AqygVrEpVQIy+ATPB7YVXgRBDJe+YY7qX0riJsMmwKf+fnNKAkFfldxBNZE\nk6enKN0M67pKAMRR51gufATcxGGxS1/Fwvsbb2cObLQIu9huGa7xeZWpcRdE\nD+VCxPrOZom9RDEeHmmED1WGQ6JgGC+d1qsLQUPZAF4kzJwrVIfKMbMC6qU/\n25IPyzT5SIHE23rCz7kepWjeRtEBE4CPqnu7CA9qAAj19eyaQv2vStX1M+at\ngLtZmZmTWuYuTSiieteLpO7l6oNKRgrfZ4CBfxwBEM8Uxbz3qFU6eomU9Nbs\nZiOAlNa3tk4dJjLDiM62BxPHSC9Y35iCxI7EqKmmD7BWJyMH9JfNbd7hWIKU\nOHveb4yFCugea3ydJsM9aJh0entEQzo77WkiYJPgzMQTLCWUV9IX+MICgs5U\nkfUaCVve9G0lN6zr1IjGlihOABUEmajRmdMlpK6cjj/6K9jk24pWvAAFxL/5\nkeJbGZAMGfGhU6aeNjf5hyLSbFlOG7tntK8g3fBR50xq1/9vgUohAHZXhdBK\nDLxw\r\n=9OZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH73E+POWddSvTQ/LMlWTE22NAIyOATb2DuqvElNH8YwIhAK7g17ZMY6ad9lWPZtwtuefsk6mggpWZ78yqYdgQ6szV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.3c195efe.0_1611108115204_0.5359982982994917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.f7b8755f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.0c95c9f7b.0","@material/dom":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-button":"0.21.0-canary.f7b8755f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"=10.0.0-canary.0c95c9f7b.0","@material/rtl":"=10.0.0-canary.0c95c9f7b.0","@material/shape":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DlUcT24pSR0Mn+Dlkuqxc4P6AnU3r7I6LnrRxpAPZ+dAvfbYJfVcWR2NBlnt+thCdvFBU2M1CRYNLgjPEne7sA==","shasum":"a04e5689dd0a11a8909e6452d36c7e53929c9e68","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSvCRA9TVsSAnZWagAAuxMP/imGcR0KhT9lgeJ81bkD\nUupZ1JxtksGRZwREyJe6s5oI2RGzFZoDxrXJXZahoiQEaXuoNvXns0zSvzvT\nB17lo3N+wE0l84m++W0SkZlPP6L7AEF3CViFwFYPiCvSLd5p7Q7UteNffnxG\nR/iYZSEWVOpHz6KK4AHGmjLRfzDKkyasQZYQvjodI6SsbVUM9zihV5w3FYIL\nDbSYdDdrDmMdAAWnYE6LkjgUuUuLoCnTxIR9ZiNHc82pHFyhr9zKV1TVwalT\nChY5+EnFEpdPTyGspDlRmuZcgcmRlJ6NQMRzQImaE4YP/D5jAeKCXX/rWXcy\n0d/sIyR0tLx7ep7kVC7lS/2tXQQL3xYSGcyyfVWKbrJF0C5aWPGoq94A/0Oo\n3tbFdcUgIIN1lLYY96T+V5wHjZFITAL1kfSRItlJLQuBXY3RtVASRbS1JJI+\n+7oU7xrQro/OkrVfEXTL8n6nAE8BEBwVS932ZvTzkxmaipqIioqnXgKipzXw\nR7EcQd7u3Xr2hoT9+0S2pvlV7Pm5m7wlBreTCzvbv6VNrK3W/LVJTaW5Siib\n6Kr984v07f5XJej4DoCulq3a0oDdTpJ2HAD5Bl1mpc46mDFepg7kS2uIN9qB\nhG8qeXxotCnMWtanZVWiPzKYMnUwHNbSCTnv9XrZdX3EflgHQ8nWMWhOGJJ6\nAxO/\r\n=BiIs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr0txYrTEyB1ejSN9DPIWVpv17OtaCVmeNknJwnkhIsgIhAP1KxIAsTEplbNkCvQlAHW4plZ75NgztlQ6KXVGYlQwW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.f7b8755f.0_1611175087111_0.22120079823220506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.f60de7df.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.2ed2d829b.0","@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-button":"0.21.0-canary.f60de7df.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yCq6vs3S37RhUZxxjQVN55Zqi0pAPZhQq+oDv+ERzIhMPVzb+iA807V5WHDVtPU6+LXzyoQPFM5BUjxoKH1EBA==","shasum":"f980073a3d6caa5bf672dbd70d34d4358c5ebaf9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6dCRA9TVsSAnZWagAAUJsP/1Yei2YLuP+YrV/7eQOw\naijswkGQ2T/gNSv9C3a9r1xP7nVz0xMbSU65DOVtiFf+75ySn1wQO2erGYCD\nOBNh4p5MTm6mnB9OZi4ufGQGTjljVLewsdpKIzaKl/OM+ZedKD/KCn5DdBeH\ngnkv/MuAuTTZKpg+1ExYvZfYoykg/y1fDrDeDj6LaxZmd5MtqZfz/Pk7997x\nAs6ajq0YVCa78diRgv7Xi+YiuoUdFCPOb/ZBrl9WiNcYERX4OQFfTUf44cQi\nLs8B2LMyhDNWtPCsKutX5qbaWXsna+a2rc0JnXl49dd6UmsKGVEYU52fhvA1\nz3DZlkP3ttjXb8oWeQjUDCU7kzfD8jEu/oTQNOZ7FdHQ+sG0vt91G8ydXW68\nism8OLgNnOmo0Wm1ozUK71fEmfAblZccgMIQsi1acN4RYvJBvn8gRFuQGTHQ\nCAVDCFOEXBo5Tde59qwZH+dilTtCDzqUKduLCoNew+cdMEtaJUFY7pgzaqGb\nP+DJVaND/AJzznJLJNaGcACaKhM5YqhXWqC/StDUEfaNs/qDScab1FOoALyU\nRSClKCaqi97lnePJWUZRlkIieqcscYEZHtfZHFILAr1bxtVaoUrlZXvv8GPw\n4YidbpgsNn101eHzSaeDNqElS0fBzDSHVQlcXHNU11WjvyhsTgt48AtsdiwT\nLlJF\r\n=/ED7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiHyxPVCEwUK0FSGZ5i7bsn/SmM1hV/xx+l13v5noy7AiEAm5goAfXeio4G2nsH7JkzLXgB6lB7D1JsoQDpbcQsvhs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.f60de7df.0_1611185821033_0.039500458433625374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.664a2927.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.2ed2d829b.0","@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-button":"0.21.0-canary.664a2927.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-i8CIOr7sMyn5nFK2UYYfH8rDjPTMmWMMB/Vuy5pzdVx+gfXZJ/aeh5N3YLlOJwhhYACkN7/f8xBFhwHvogUkPg==","shasum":"d3cf3b8673dfde9f7ce3769b0a4ea084d16ef95d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOiCRA9TVsSAnZWagAAYOMP/3BeZBlc9/0+pxMHGUQ3\ngVcEQZyy9A75DldMlD/mLMDk0/VZMtxl4efMWcEHPDufdD8/HfPjOi8IweN1\nN84jU3CKj1qohPSFneXAYDi/HD2C+w1pzZM4bx7I0aQfgkvXoNxePpN1vcaY\nF2X/qMMKEsNTkmPWVWwKUJgNgha6imtYQc0wCrZ+29tSHpOwYoDr4Nb/jLgO\n3PZU8c4aa0WK378ugrh8yyPjrLlR4wCabLC8qPtRnnF4pk2cLcKePGg2t0zz\nbl/R+U9dg0LKSneI9RFsFfO4mPdY5nmGYAIgaOfXL9DQqqYAZ6xLBbkS2qWR\n4CaIvjOevWCZiZWM4E5YZGhNgk/KEQtx4ZTvDNNo9IGi2NgIA9OLiJRPIH+H\n+KnoYaV5dDeIxY68xdNr6dOupvom12gZqxkYP3ngB8TP+fEvDYQswhGbZS2Q\nX5iiOi2Uulq6rbZGQ8b6zoTHfst8SptJQl1EXnADDAAiHMpmrhdz9D6LWwFX\nFTAdTJ6f19JuU9DcEy8DAvnRESRO7Z1d7GT+z/9d8fbOz9hByMiPFhSSyA5a\nl9exyCI2avchxSXo71ptmVXuOLky1xYF+8P2D8OGFOQU0icF1uJrrp6vc9Tu\nettAOJEyP7MhAwq0z2QvXlLo9nBTVvELdhN0jNgzFgWaU5SN3cv4M0JuTpUN\nvf0V\r\n=G4Sc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqEhTR2AVvGcGNWwWzj1R896kaXfgdVqVfy0/FEVxJSAiBmoLwaSYrxgfWe8PVNA6LGX7E6o2dyvd3p0JX8eXfc0g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.664a2927.0_1611256738290_0.6127556236772798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.a6d312e5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.fd61b0476.0","@material/dom":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-button":"0.21.0-canary.a6d312e5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.fd61b0476.0","@material/feature-targeting":"=10.0.0-canary.fd61b0476.0","@material/rtl":"=10.0.0-canary.fd61b0476.0","@material/shape":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0b0VOpx72bnZ4B+DVV09v5Zu5sNw3YWzGTeaMNkOeZVIpkA/i3tVO+mh1LVFjvTZWof4S/AqtE0FoWB85YraDA==","shasum":"b900e86537beba3f1c231c003d57fe7b81426b31","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaOCRA9TVsSAnZWagAAY0kP/2IRo688RmpgNInU5Mf6\naGG1HhDf5R8zFCe5WZFLy09SUsykKUdE6vNaxrzD55LmEqP4OyfaneYB9vvG\nefFGLF6wQExDzz2bd+qlpmUDaDxyZsWVP+roVKUFBa4UjeiNeT0UtVvWApOl\nwPxDqRuzuJYg0lmMk1sEL6yJbOjeAeYpz4YAI/eAvQlBB0izSpSMtLGlVzcq\n5y11iTK0qu1raBeTWY50tu7NT0RQZBMo2CEBvCC9yg2QIV9o/0Vi8hDbJn6M\nZLLvsFmwjRlnVvqOCkeEMpKobWkne4qv4mxUD6u2xllFya3hI3PUt5DhnwF9\nCUCs30n3Iis0xRnBAirlwFyRKZwjddrOETl3IouutFGX94fNy8yfYK3XGb/C\nA2Pye2NwIXJ3xPPzc6HBu/OkbTyHpz2t1XIVi8U8H22fReydyX9s2z+j0FX/\nLnS/fK70fzlqyPHgHCYM+SMncg30lacw/w2XOa3obk6hCWxwE2fJK607gvqC\ng4yGH1Q1jWZHfEdK3KmXgBnh5iAazKn9kCVy62lCvsial7i6MBBK+4xBHPZg\nKahH9/bUUlNEi1Q5BVDFphdUl5RsLI6az8Gcz+lNDqjevMBLZgtflqFOpG5v\nRP7rz2tb34W7v+juo8mHuBAt6kI/3YbBlqVvsYZU/L46YjOdw34irASK3o7E\nbEur\r\n=vQFK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8gQj3R3DKSetHMdA6fMb05Gws4PQ+bY2Nrr4X3X38MgIgSe63x1O70NXSx/E7fy+sADwfIbAknVO50sf1yHXacts="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.a6d312e5.0_1611265677890_0.42634536476743445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.027365eb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.07deaec27.0","@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-button":"0.21.0-canary.027365eb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I0F4UeYbewMx6g5vFnPm4JVlYytPYrSjKbLrDjb+eXgk3DOafiApPFKwfT4luHIsv6WYRp6SkQTEi1wXvVcAIQ==","shasum":"68424a72f7e626d0b1a47ddda1efa923351c0acf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6rCRA9TVsSAnZWagAAdaQP/0bdTxTMqsiXa5Bc5Io1\nHSEiT3hkbydeG1HaHPz8qcSjXjCrUfrN4Xu5wxRAlMUjYOAUczkyGpmJP+EQ\ng8+kqI4+s7p9cVU/K4Pkky6+lPdyhEAXq+xcGLFg5aUDYATERBzLc/+1nyw6\nlasT/hequ0NWiOrjZSSd+7HYSgEL8pYnMd0WYhFRW1SwzgQU9BUGgTm7YtOT\nWvznu9EP9F2XtpTA7D8QCo4N39W+BWyzoOgpeE5MDCtq8Fj531+qlsE3awG2\nTxxApHYX1FDR65KnRsZRXXZdqvfYV1SrRVlJFYEDsyEPLfiH2I8PHUX+ZEfN\nP62oNtXoqr+oS79SF/JKMPMTW6FfkjN5j+l36NgH1PimauimQpbndigdszU1\nMyyNuww3S/62Qj7yZgHpSTkPmayZzrNNyVuhH39habzhBnRDGOfUYu0OL/TI\nH/t7czxZG2G2X8e6GVPQ90uVrNfH0YlxWkKsDPF54vtum5QpD8j3y5lIFYSe\nAzoU2Ghi1aHEQ9K+bgQbnGKrHhU9k/QuGb0oKw6aHtSgydSMv9ynrZWCOiuV\nMbxTxc9gtKivAupeL1Ifd6ltCcsV7Rg7wQLjdTFds1do9/6jmPbNLmzjgoZ4\na79+6sR5anxPuCL6lO2S7ttBt+zffPlDPft5HDGAVPCUWiuKQic1jTSxwZm2\nO7a5\r\n=VJ2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICI+DcG2wXz8MTdadA5Kh3NQS+ZpDSdFhs/Ya+EAsY0QAiAeOKKHS9MfprP5u070fI+LAzO8M3WnDu8LePX3W7/USA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.027365eb.0_1611349675194_0.8737032394117645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.7e72b66d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.07deaec27.0","@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-button":"0.21.0-canary.7e72b66d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vrTvOtest8A80UmHZvZyowE4IB9av73/GNP8AGMrP33RQD5lzIadYUuFT0Pux7d3S1XIEgo6el0ZaqpY0BVX0Q==","shasum":"a4b03eb301ac05999f1ff69dcb2328a6fc5ab5a9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC19BCRA9TVsSAnZWagAAbxEP/R9gzpQpqfMkKix7Do8N\nLrCgms4DTpYsM0wXEu3v95H+RdOITU/WjL6LhjNYjAIGkVpNXZbKmFMWjx2k\nnV6lWwz24AfQ2UqllNdA27Xgek83Uz7ygt9u9RAgolKo75jYNaSLGwaQ5B21\n1AvTd1lEsAiv+nzAAbEuk8kG7jIRDMs/psXUG0eoel1BpxTRIwo6j9o00mOV\nwIk3u52oUemFsG1qxIUbDI7sfCwOnAeelNRQGo4qCFxfqhmTGg077mF6QiPL\nlVIf4n/To5U8esmGfKLqe/N8HMhOszXOyJorg6HGt+uAEjQmeFTzIDianKRv\nmhdWeYumoRTZJgjkFtecLH/wElyZpRy92+fbPlOpfYALwk6XZjHzn+abDMS2\nSfGgXchjlc3zMZtdGLqch2jpYJfqLj/OzBpRMxg8M/unE03BiWCSWUVCo9TZ\niNVt4eApp2KpWN0t+GGg925OY8fKkdPZIRUrTXKo9o2QWp1h08NGLDJHwtJ+\n4ULofmLgUDahsE+VYCJh8IciZ1L49OjeQngUG18cJfvw/o3yxUKuR6h98+IV\nhlz6BpnnjZI3+NLqOFVHeBAODBTPCpFsA3Gh3Tt57fQlj86gd+YI4lbYZWwq\nXOxbN+9xq8k8W+zGJhhSLf4eIjYIY4nVwP9dxDk2zOcnm3u2YtPnO6T350PJ\n+3TR\r\n=ievH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfU6NW4a9NmSOlw3y5RMaFPNHbeHSnRoI2xvT/zGd2QAiBxq0f3rQvOSHKdLhTOfqkaXAmehwcRJX6AaQmZN6oGdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.7e72b66d.0_1611358016874_0.27673414485472203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.07deaec27.0","@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-button":"0.21.0-canary.a6d6a1e7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-C/Wo6xxzL8BC+tS4R7fQ8ToPlZVlyWKj9rHkuS6PkAGkoSKknM5RKuQGge0IuUsneEYtqoFIw1HW+FjHu7Bc7A==","shasum":"791c93adb6f07c7326487c0793084f7bfefc9a40","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2C0CRA9TVsSAnZWagAASgoP/0hJpf6VKouZTmbG01qS\njC1ZsT9izi3IL11OUXP1epnaGYN9d6CdwRCM0briTgQ9pNudIimk5h+MvCUW\nloucks1QXuSiIpIERgcnTzYGAfdCUUl5/q+QUaATzWF749slqLceKZVCTolY\nRW+rkwvR3vRq/NSJdNA9U+mHKJ5oqXP5IPlfOAJ2xn6+ESLMWanU9JaAStYP\nGhVt4QfxwMUmf3vRGW4ZFJgZvZWBuwTGuAPeN2yH5usI7d3MHxI7xYM8/MCT\n4vchuXBGVAnJxC+qb5fJWZx6jCgWUfoOskdGeY8XYkippyEfeur1IM7ek//w\nEsJmQ5NHoubnmlPyh52T5CTxJNrzVTa+qpSdtGjMPePOxJ1f98tUncx46fTD\nQCLtFCl9/GK7bcBTEKWMfsBartJaqNFOqs1iooyWheJ5ZtQBy1dVhY71ETny\nxsi3/aQ2DrqRdYjXQ8U9VN+SPgzAxCe/eJlNZ8TMblBEGEjLPHtcQCqjpWRy\nk2fuxbwbvQ6Csez4nRUYr9+BQlKxYxB8LIU9cIBjJXAybAMbD8AsATJuEJnV\nZp3nQTZd3jmK56JYiQPt8o6k65QUYRRD9NQ3vVXbCMLYngNR+momnERvsadb\nygTxec1UBNctVEi9bviTBgQa0gBXrBv3fXu3n7o4kiJusjWSVc2M+1H+PQYy\nKNOl\r\n=dNsO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+iPE5szJpKFovLbGHGoHLhwkMl/QbaSeoFTgIM6T5igIgdRtnttPkuDaJqUj8QQ+HhG07lELIlshBeMEejJJxOug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.a6d6a1e7.0_1611358387723_0.28729415734129526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b95fe100.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.07deaec27.0","@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-button":"0.21.0-canary.b95fe100.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.07deaec27.0","@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LwM++e7Ipb3//HEg54EaJWfH7giMSh2JGH2ldfp6DQay6uXbOvqGzl4a9UI97ZD+zhNQHCHCoAWVGfRF9V7LOg==","shasum":"850e9079950c3a0e660e0e198f9b508d6aee363d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UzCRA9TVsSAnZWagAAXykP/1tnCYgc5c/FTRnADPlG\niq9/vonTtnFvL1rIrzpJdI3o2KIolAPPDUdvWPZkFz04flv8uFCn/dpTF8cm\nJd1CUZavqrv+U43sNy4pU1naUlJ4GLUftwfXCX4xKpPIxYwptoorwsCky+H0\n7SYOfykExCfx8n/33cSwCb1BuL+1zo+xYuLbFZ8eZ8EMETiZXa3IWZvDYH9u\nwOyHRFTOEDnXI7m4cE+QdiGDAYZYgVQBbbEkkA1KXH0kwo7mq0/uoGxMT3+N\nk7uWITVMpK8ZM9z1uLlxFcp9lH8EjZcj7lBUtIViiwPbqNLkzcf108p9Wh5q\n39mennRqO4oKE8Ni2UoPoWiTCMyI+gdvcxcoBua5I/RYfK8Mw6amjtqUNuW2\nV4rlHenQ19So4Q4MGlg9tHbuoN4aTY7pxfGguAMFOjEcMfMMbPxmr0yulNbd\nS560ulxgWUlwKbwzabODxqjo0xeE1jnEORwdtLbrefsPRpkJLlymuHA8Ck+9\n8dYHzUCjQsoP+CWX7czRTLPYUS0fqBSf4VRMyLS9HOklB1TuB6JJNsMgs3a5\ncLZRmIrTs0Y8b4Pk/IkyCfADS4GgB03AInFvhAVdKAzzy+wqyXwf6BTn+8Uo\nyuoKC3L5s7uc4MsDgx4bOO9WseUNi40BzsOZa4LIhmMN+ezoGPX/889FI5Nx\nh/TK\r\n=OBmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZdagjPk6T0wexnDbeJQlgluFC8WFWsHe0fSTA5nqNlAiEA1/94J+2RO4sRfWgWXEPzx9YQxwzkc+mFs2KOdCduvrI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b95fe100.0_1611359538713_0.007199651100040949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c8797192.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b9adb7a0f.0","@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-button":"0.21.0-canary.c8797192.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IeB67prVZ64UmFwWzdiJczmyR/HlxXy/M3jt5kRvTnCbJ3e+a5jSm1Hzgv6MSlzTUFgMuGC0hEe5cFnRh8+/0Q==","shasum":"eb506fdcb2a9d5244b0f410372c78d3e38158b21","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jLCRA9TVsSAnZWagAAEugQAID/n3/W91mPX5PCnX1h\ncihCts9UdehhhLDAM8OasueQnojIOSL0w/0a1CvohhAO9024dPaTiNyxJCqx\n7P+66kPw+9xfU4d/+CoSDjAyWELCK2onEv4h+DLzL8RZnCFnqtcA6u/98txX\nr3dheFjFokIqdD8bbPdXY3tZ4WT9f70TDthmuYE+MluLrnI1Wszf5Unv2HFV\nuziCu+TUe5V88BHhnfpE5IhCknvclfuHl/qExSXdM+AvTBDmhNklwmDGv61P\nYMFrcX/bjo0pkr3fOLPZWinshr+QONCIKphZEd4DMAtMQOnXvKN+yiomPgVJ\n20mBd11IvWPyS2SXBBUexhS/Dicje/uptJSVS1vsCe+j15HYqTd+8f//f2Kr\nrLb8vQPkFU4zKDLmCK8e1TLfutlrz8P0ABZFi+APHxDwobfxPh93Il0ofRop\n2/DJ0cFpZSdEpNw6+Rnmp7TZlH6b0M5CoegUjUvTfWEUdwyms9RNDtBeuWMa\nZ25gxB8+Uf/B/sKZQ0LFmW/rZZhm7J9TXvnTb2HO3u/kLPtrbo4dDL5P4g3l\n2zbOgS4PUHGEZpIg0bWJr/Jx2YEp8TvMz/UZzG0vlWzxxqxxWBMAEbMnrRNK\n4ZX/GG/9vGooBUQgt/Vn9upGt6eCa3X5U2UGorDho7Tr9KXrB4KT/jhDRetX\nNDqc\r\n=1gq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHO2C3XR9EZw4vKb44h4XTg2WU1u1IHBwZS7dYBcmypWAiBb95Fw7EtOrWnOha7ldC2YkoyfxFjLHBnLgyqlVpX+qw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c8797192.0_1611360459061_0.9015789593324661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.946f5563.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b9adb7a0f.0","@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-button":"0.21.0-canary.946f5563.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r6h3zprBIaRLj/renuQ4lhwJ/AvdRyfZGD/OkJeySib9disUARdNcFbnBWjwW6I35kobzUksyF+Gb0olXLFKeQ==","shasum":"f65e978dbe0cd4ac34efaa7d3ade87bede27666c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FPCRA9TVsSAnZWagAAsOYP/3EDGZvXhaXX7SOFFFnk\ncPKzBmV/I+6ALeLUeUZnBRYoYm3+Z1g7CDVqf/P+1i0fmoY9xFBAMcna820o\n46PQT8CQcNjnwsyqSCzefIjBXam86rWuft/ZURnK8EE8cqIBASLT6NtKYhc6\noV/JjCiqC9GWjsnhnzcDlsBpf62foORKUqUDQsX0TZMTyPeYDJkTvE6huVyy\n4AATY54Yy1M42G9fp2vh4gDlnBy2ii+vOEKk8uSk5kYJ7PU/UIsDYmcy5E7r\nNh8aNUIZRd7LEuVq36eDdMBlNzKkT8oHZKCcZkqod37BMV21+xUYvCKYQJ8y\nyNAwTujW7VhckLCzGuIbAc4Xv6n/vror+svSyXnX7wXTmYeDgcuKOhpEgPuK\naMF+B83w8BeH46D0uEOv7WNoKa5HY7y31no8ALc8zn1pITJlnTFhYbsnQVWU\n9jATbVsKetQycRHiEZ81vpFgmzFMaFnNRY+Dev4jIZek8OQ+HtuUXzRYwnS5\ntAKRwz46XAey1NTJoyHs4o+5Pz0kW6pGKzmCzvUtNVk1qIo6esdCQMK6cDyg\nplExd2Y18/sxhhhAybDbXgFy/t5nWHutuy4gm7ZA7P+Sle6vMrcPJdrJ7k55\nWtb+N29t7Ar841kRcE0UfRyj7bTuPEHw/GRBWOMoFGT4nJjHHHSeqq+4KrcQ\nvVc+\r\n=qtyH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXLBcwg4u5P+OntPdTu4zeaEBng7SeoMvgu2SSEWvj7QIgTjk9p6XoXe2PJWITxUn5zJqZCtvqhHnwDdtriv29UIU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.946f5563.0_1611362639121_0.1506780585995684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.43664f0e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b9adb7a0f.0","@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-button":"0.21.0-canary.43664f0e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UdLDMXDOWY3d/+GLaCAilsZnsRAKiSokV66RVyHfFmuhZ304yiVXYtethMIKLhO+WHjQa6xTZpCZAIOOZrprVA==","shasum":"e301e7d3d3352510ecf6227c495a11a1b3bce5c0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jhCRA9TVsSAnZWagAAy04QAIOZ3/kFMH269M4JR2x1\nFy3G4kQy3q7q/wwhDaFz0obHZZL4AzSpIj6am/nf587UBSQIkowf2+nQR+Fc\nbaWXFv+Ko0bzl+Z6J2s0TGF7bQYUJpDRnHp6mVHE7BcReZltYd5BKcucJ7At\n/O0HH0kF+dAMz0Ogg+F2LuVayJWkBHHOM4+zh8AiVmSzpJg3afpC57wuUtfz\nlwBdrFoj5LAhSjj/O6A+4o+xXEze2jcreQRuYnsLdcVO5Ta+RWfteYkbBzzW\ndiCfAV4C6H7iJJnI3VtQ3Hkd8rW9kLwvJO+LSgdDQWhUC5gqziKgJxh+s/yv\nzbmC2VYCCwmrAK6+zchjSwiAOthHf7cmgG+W6GFhD/BqNcyfDtn4XxCQv0rf\n3EOqme5V5uJb5jddz4New7HsJLkxgRfOGjlQq6CdCBQjo4PGijT1Mw2XJrTI\nZVPsHpk4Vfr5wJKXU6DFD4WrJpgp5KYN1YUx2Hyhmu5gZVtXAFeVuQOLB4bO\nJFT/z03TLfTt35K1Z/79hRvP2damKxgg8rMd0pDFQI1/WBZ7nuUmG3fj2ra2\nOOy6A502zY3Q0sPpNtZc2KA62jSqJ4hrIJysznULHE5NS5bU/xyhglP/+ZoW\nCc8edeEkaU7xPmJJMikJnZmqJvPLQhvLW2FSbsJr3uPwbCbqeoPcbqMm83wc\n1tHv\r\n=51S9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJ/OMKw1f5o+g/RTR4cCeFmqMiPWQ10z7o2wl+GCJpdAiBADptWJv4kFYSOxaLuQS/1uLs1YTS6MIH7ZbA3ENhfpQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.43664f0e.0_1611614432824_0.31558102901137364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2e769e3c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.b9adb7a0f.0","@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-button":"0.21.0-canary.2e769e3c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LEx4vFx+2l6u9ciMjXXwgqPJtPJsz0o1kkkYqHO60YnFNkSgDL2BK4tZXNmIzYA7NWQIIr/HNurdSDH9gTwzxQ==","shasum":"f94f9075bdab15c3ecf65863ddd9142f5ef66301","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":100386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10NCRA9TVsSAnZWagAAWEYP/ipuH7JIz7BLiz2q2Y7e\nga84YlmAk1Nd1JP+495eVDNsayp4TcWKxAP0lbAcoDGY1OpDPLm88UTzSHm0\nJPXhI2q0FbGUJbopP3pID/VHqkAj3nUq4ZNKxMKIeWYoBUrp8AmuEuPMx4Dl\nQvYcHcNbW4vFnlw6xYmIkrKYlZQ2lXcB8cq2TljsNTctkXxFiCt19weyqWM2\nnF3ZZ6/3h637uUtn5Gib2AzF54XMxE3fCBptCTn1XPKqlHhvp5+rQU9ef9n7\nP6VzkXKnebnj+rXTP4nvOcWYw0V3nR2XdJYonwlIZKVt6Kxz7Bq7JfljaxcQ\ndS6So8De9FBG8YjwBcvKzDZLRJULnmVzf5rC8fA2SgvK43zSniaa7FSnpLn3\nkXCamvn9OmkO4rSLsaNgxvsvX3tcFXhF1VP57Yi2ZQy7n8sabaKmTcZQZ+i/\niibNMOsxOOC9evcYNs5S7IsWWAMn2ivnhqBIowU3p9uNTSKv0UZnk1r+3ghM\n7rhsNfO3X32xyIIgDNq3Kod6tYKGi8dlD0vnr12ucB7YgcySPN/L9WbUITvy\nh8qlHMTC5mTNXJFQeYZ/kMLsVvjkBDyaDtlIcFdhu0YRGzAcXCGvS0dO0atY\nhYZRlW8h1GVSran+Jsi/SC8dI6a7KgGyWV/svMMRDftSPuNhSRHAKEgD6GAa\njtd/\r\n=23KA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsXrHdOzXTY0U7Fzj5ElZgi0rfZwUuwAZ5JUycc/M86AiA70BHqiM0wgNUmiGcA/YC75QLUqVVWloHgmlnXZEMBcw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2e769e3c.0_1611619597381_0.5843193972321485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.14e01610.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-button":"0.21.0-canary.14e01610.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6M7IANh4bbZA3M1FLcxKWe/da2/xgPTLB0CRt3PVxnkHKsmV8Fyu/7NfcNMlITHgCYo0ygyCBIpx7j+LjiTWNw==","shasum":"7a749890c42e2938c945099baf77d1815989b1ee","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRbCRA9TVsSAnZWagAA9h8QAIYVwVTlq7R+iAMUSdkQ\nARprWW7+TnKxp8VV4N8u267qPTymzQl/rQRRvgpq11RokO0nd621RMFYgyVt\nApAhlKkGquL1C/7iTKqUjRt+K2SJ/8Nf/dt8mPoHbRqK/TSP8eqhN5/x7LXQ\nrTIcOd+sh4BXC5zg058ATUlSt+wH7oSHwwjuDEuuDehSWt/C0PRWSS/96LDJ\nibgapygWCyKBf/a0WxW8FRNou5poyrSZy8AdMxdnFC9C4heuaPt+m2moa/B0\ngYJ0fz4lVHKlHLbRoWx5ekQKKgkgccTPG22xVYPBAWng1d2bBhPLh2G9a3Lk\nSs2sIH+02nKW+IJmIvARtJk97SNBI8K2mdg8xmUAx0FNBHCHARu5qdTEVa2s\nqO6V4Koyz72DwCnQajh1gOVJ3qXdQkjl0CvYV9asDRau06Qw/78Ga5p2SRnl\nbvJmABrUkaV+IRlf7OdcnmihJbc5s4F3gmsqhM21byxUJ0Yn7aH/HWD/ezXr\nTvIaxHNEYwQ0DKvMgnYicT0M/fPSYlS8v5uziD8dm+JOTWTNnIheNrE9wpRl\nZk/nkogexkBUNQPE5vkOLzFv4ljwSU3nS23sbuo4lXFZ8TsK68WRbPW0RFYb\nSN+PEFbCyKZo32YCCDXYOlJmHdFkMvUbwIOq9Kb2UmVZHPGDU/hJXY6KG5ww\nDIY7\r\n=0NE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpJKB+N5vzlZAEMQHj25SqxCxS72GzoSZeuNDISmQwNAiBn6HzS9QuhBoRnzfLL97howD83x42QMnVY4k4CMEiSEQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.14e01610.0_1611777114756_0.165380092723157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5de00c1b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-button":"0.21.0-canary.5de00c1b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YJ4wBrEiz5MWKcsO8t2PjjNn/ZBDoZft/D7ShhO0B+h8iiKcowKvDyPPlqcQfBMYdFeNdVqsbOzwAaGBmzTidg==","shasum":"3deced4447bda9df8b7861716fbbf50241819472","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpeCRA9TVsSAnZWagAAUGEP/ijAneRLTQHs0VEy1+1I\nGR3iw5UPmzlMKRPkSxxmSgeohK97/+xM7XX4OZ1ox0g25K3MCrlSUEmE++SZ\n13rSfVFaKmDZJaUsnI/NBnTLXIOvPJof/3BMaxVZsyi3cXXYxl18X9lgJ3Ox\nlv9oBwTtIRnMqy6YuY4C8bL7r0kYEw6rNS5FH4qzfCm59NLQTKV9cSoB9EKx\nMSaN0ha0eAhVWlKeA9fTJzS3xSKSaGy6dPmeB9wBFTDd3+pbRo2hahP86h8/\nqTAyEDnk4rktaOyhnmcdDKIwicsMq7Dn8YQJjCxlKTsvFVzuI+eee8Eji5Ti\nL4NkaGkbPYAjMGTdotyHQZ6Hv1Ha6C6Zkg0hRHVul2J0DvnKzov10J8BJc+7\nuVMxJwidlY+BKI4ROBroqiODZBrJvZeJDzzl6FC1KBBbJGJaxWE3mnjUX5BE\nC3Jw16tb4exvQN1eI8UMo6ZmSdsz6/AyxFrz0xSsDzsj7pZAyNx2vNE95Ykq\nONf0gC1TaZRwcDM3UTxLiQZXG2Ml/oUYV3nJP5I3vftI2j+wsIcjiRHoVbNU\nBJGCwvchIx/sFptKPCAeInh1cpa1gej3MNRW4GbPqJkbWVIuXyg2U/FWar3s\nGJ2jlyujq3rGuEf3Wx7Zp+EPD1ySden4KcRT2I+nVQ1+68FbRPfbu3jL5uGY\nBfEw\r\n=9Mm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgCtPKfSpxmCyh74/Bkol3tt0IFMs/rPUv2m/RSdEuKAiANG+q4l3M5pkhBfq+SzeSrF64XhNr3yhsi/9WGxMJ3+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5de00c1b.0_1611778654098_0.1535816870665876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5a328336.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-button":"0.21.0-canary.5a328336.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-EyLpa4z7VQ9BmKv3lM1J6Q7INeHICgLUOlyT8eoANYbVHkfg2rkqvjkEyDF/gKd0YDXn+rm1+BcFnYhN2RJB0w==","shasum":"8e739aab8490134fbcab568b301a2b225d2a37b7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaXCRA9TVsSAnZWagAAI2QP/0FxopMhpM3muMJAdKAG\nPoHeNbgrpzpYon5X8QPJdvZK2dHzv+7uakd3PQAjxRypqrKGJwRkQTGwVefe\n6OL+OXkoLSPAYp+gIFQ0/LMUZnf7lzC30/7tSYV1oHPt+DXcAZP/Fgv/0f8v\nFs01QBkK8Yifw/Lsfk3oI3hhTdyef4/FgHuwEljGa7t9RbDWxkoJ51QlNEE1\ngbyVW2LMaEIbui3F738xrr6drvTJeCJOFsZi/y3/g0edLMTIScHj9gSw3AVl\nTK35vl+81Ueb9TqyOzAIO3G8IBNlvLzmwXMDSEjFPptc+0v4vvipLgC9KTcu\nzy/RtcsCD6q7BGiO9+KPxCAnkuI35G0aufP8OXq1NMg6M97R0ybCLi/47WyC\nyix1zYMdCKduk4pEK2xgCMPp7HAlNXMWrYft71nyrI4zhe82swDX0h/RSOd8\nmU0Fqfbwt789Wh+kkcTOgOQBwDCdMgWKctM0j/NjgkUOJDKbem7NlfXaRcvn\nW/5N+zKmexukqwKZKcUG+nh171U5S5ivtXmI9ypCA4SqROrHQ+fhMlbwhoFe\n33o7lBiiLJTZpLuLk/PDnnuGwQsQ2Om8L27u4HHcuI2ZfiyuANiNB/WLO+h2\ntqOT9CZGtznGy5NIVS4DdH03yBXdnYziOZ59Sg2CpWStE/Y8Gv0JNiOfFtdT\n8DPJ\r\n=pPh0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJbrVu81rJO9s6Sha97sVAOL4EoAv6l12P9dQjCIc5VAiEAqq1tkSCZFFISHjliuY5Zg0hlLT7x8O92zEN2icrfPFc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5a328336.0_1611863702765_0.33617525105323876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.533b1251.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-button":"0.21.0-canary.533b1251.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Qc0wA+JzEYv+GrV+Sa9oI5JmON1wF3pgbDrK97K8wkkO3WNajBw1/bcmJA/u79/71o+8pC1T5qklIHKeBJW5CQ==","shasum":"f7dfcb1a6013d68a14191125f8a325b7e2dba3fc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXJCRA9TVsSAnZWagAA0u4P/iwJ4oO9VcpLbsyQTZ1A\n5donRhmOqOydxd3Xt741A6ibeRpi4v5Ag+jRT/S2QhNIdD5amtePmNm2ong9\npX7bl6Q3GHmjEUJdN4pdrniuMmY2Pe5DBeRIQlC1UswC1FIvZVYNIW9h5FsI\nBHln5o+ncqJzBUc4QmbPPV7fc6PbXU0CbS+no2osu/LffwTbBrBk2k0PGlXS\nX3WRJEiG5l2FchFoPKmABZh3upXor/7715ALxqF8ltN/GB+Seo/bK+ALv3yc\nDVu2BkikUogstFN4vmdfeVM1CSORXxuTvZBtStzYY5DLxfbOXWdHquwLgyGU\nISRi9QVYtHOD/ItxExfQVeNG1fUvyRQZUDduzmZLoC5nBIMv4RZwKfhap7Ro\nR/5Y4Q+AlkYki0jMkvcv4e4wQ6Z4TpwHjLoLW8uK+WF68DVDKORJcscpsn90\nL9hFV6YEA3/hGpJIIGvgNzFbmCR9yixYENBwgZxQWtt5HLIe7HIut1kTvEfq\n/sSB7F6glyl2TSxQsBYiIG/UXSEH+WnJw3w9O/dhbvfvaJAskelLtCBhYg8r\nNLDkItSOoG+Uk9db20KKl+pGtBrDIpp9qbD2ZrZIKI1T+Sq+dEAPEwu4TBmY\nml36QXFYQuNJ7ii0dnssP8WZKo8w7uEnt21kk6Hvf9RlWPsXf2Ymg1p4skZG\n5cOw\r\n=CZGD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvcWVQfK2N1Bli9uL5zEWsG6JLXx2JoH92B6x/CsgCHAiEAteR+0NXifPetYzKjtL6eB6Fxe1ypNAI7zZB0UT5HmsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.533b1251.0_1611933129362_0.4206342410916837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-button":"0.21.0-canary.ab5c0a10.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/f6PuZANkc3vTQi/0Xfc5rBXvD2rkXhV5SSOjkeczTzdQ9MOZVZkZOiDJjYKzJ3+x6W6OHfWbSBoM4Xw6Yh14w==","shasum":"1552d63783c9b3153554bdbc739bc81129d0a5dc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNxCRA9TVsSAnZWagAA6XsP/3HmtrhndM9Q2442Ewer\nSpIX5I8BD5Zxo9moME9af6dxDE0wVojLAgTfHwSnGjmEhuOfFnsgT8c1JX0b\n7/cbUdUUtY2VG3nNvopxODdbkN2/pXpGN/klDlqLf+GHoo8lZtlhQNztOTKL\nVS39XHtd9duSRd7z8dricY9wp9LDvbYQRvJya8G8A0nZIctbNQhmJ3Kvz5gl\nQAiVApmxT3OZugPmkl8GYof7WyJNpPLYH4DmB9CrFqXXIkwKFnkB7ypyRcG1\nZHJg2E016FGV64OpBxvc//fzoZtP9moqWmkyVIWzFGZ+0EVQDrfEhg9kwybP\nbQYAkbJ844IVZ8T5CsmJ+SraVFiBagK31S6d3trajcq1t4p/6F0skKcl/Bv4\niV9WFHQ2y0IAxrFmld74jADwpYP1bl/vZudKa4mgDXnASuZj6WlPJaqTHvAV\n1PoS8u8I+65ZssOB8nUmcPKIgYvXYW3miIBFP0kcPc6kTMJ8emcfQWD/Vbk7\nyA0pgqMIDFbO7+SpuelGMRrJwS8+eOoE6xGkcPa88u2nh9MJGd3gJg3nAidw\nlJS1U1XxXGkpBmRwY50RpXRuEbVjSNIidL+tTUTmkcJa/jtoPPPro8BXY8jJ\n+qV28uUZgRBAZWy0/yZ+wXefypm+3ZaEKoruIQvtMQ1qz2CK2DKwacFuPKvg\n9JNm\r\n=jras\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5PSvy3gzrHE0kDiUsABbSVOd80fVDrANyDFeoWj9h9QIgT8xCBKi96boqjiZ4k9OGV6Mw3oeft5gME3VduQmGlmw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.ab5c0a10.0_1612297072854_0.9474248055097314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b7a40b27.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.96878e1d0.0","@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-button":"0.21.0-canary.b7a40b27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-hZUe1/lT5PG3/EU3Axaj37O8Lz2DnfGr8dASGRcGglKEoVhNNK3xNZfud+6PT5XDT6ZrNHc0MD6MPSpEEMYHgA==","shasum":"16c98c04fa60f26b753c792ce1f99c6e330f712e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtxCRA9TVsSAnZWagAAGcUQAJ2eEDv3KSY+fiV1DH5r\nu08PvJkOr4jrmANo219eldzSRe/5xfw4BMKnvxEvY1r64c/PgabgkQE3iIqB\nmKAn9kwlNQBw0Ul+PBCriGEGGTPvjSTcvfEpxr/9EZSwPhYqtjglIj5MCdmZ\n1VaoaF8MIC1YX7qKvzKCvL341gbypYIEX5w5q7nRqvrahhh4HdeREjuVqQDx\nmv411udC7N/AkflgdxPmkwK0stB+dNKn3vKAtwEfV7mXIPLsLTrwp+ba4Xsz\nAcp5BdoqhF4GQ/EurV2f6AXj5GAimN9ILZMi0OW/bCQvBeIOar+ThRZe6n/k\nYmxuYWYh8OzuJAGalvLYsdtN4RQ/PfazBwRK4DdyMC9xWzbfnMnpLh0t1wGX\n73qgB4rNRiWIbjD4LLZj5b863s6tKIYDTcPgzPfmDyEO2ktaKuklMoVUMNbA\np/+oBxg4f072BDOX/V+zrDjASc8mRw0AhUBH0m8yUCt1nsobxnwifVCT3Hlp\nTR5ryjqmZzpKR6yvOx4TrovsfSzFX9P2L0lwcN0dK4cDIf6juOFPl7DRioUX\nngMu0gAP7HQ7u3PjT/AIpP9Brr0ADo73Qeh/1c/cuFFf7906aUAHrmNMv+kM\nZHsGL1sw14Z50YczhNS/w4rY/8PS5M1ZM7c+yt8cexH+KDvlPLd+tf9Szxtj\ncYRv\r\n=cipZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/gbTyews8jVR9xiv7a8hHzWqQY9PxZMdEetpsEiQUvQIhALX6pPAwtcleql4ofDWR5VRDkG0j7QrItX/7Kqgtdc1E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b7a40b27.0_1612364657350_0.7877881506176578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0fdee204.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=10.0.0-canary.8e66dbfee.0","@material/dom":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-button":"0.21.0-canary.0fdee204.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"=10.0.0-canary.8e66dbfee.0","@material/rtl":"=10.0.0-canary.8e66dbfee.0","@material/shape":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ffsSWjRD20rDFdXrhBy63kuSU8srzvIPYdtfXN1F5XeYb2lhA6KkwPqozAPLugd3Muod9siHRHvUQq1q8DL8ng==","shasum":"c96b1b72f0139d874e8db20c6652f02135f5a670","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuy1CRA9TVsSAnZWagAAx54P/24W9z0E13s2b1J42KyE\nSetRtu4NYSHwfY2sw/xVd/FqthwEawmGdq/c0rSCM9Wr/aKKlYo+sLGHZqVv\nVwwMNz0QgW/zsFHVc7oHDhhOoiUTGVMa1oC+ur1Ls7hvm8kXSjn4hn51TdIi\nGCa/fAmd7P6y5Gxd9RWpC3H9Kkfao0n9tnLSBwAZDoawiGQ7AjR/A/YzUBD3\nJ9dHnQT/RM7lWuOUQpeaU5Y+/IQabJ4YpC46ELMr1+zX5vIjb0JpXGwzQs0n\nX77LAJTttPE7LsTZ7fvFn6+2ko7IdUKlQxdcFu8ntHv12B76V/NccQoga8vM\nIAq5IW6Qs+rJgw/Zl1L52ce+9C64Fvp7F21z6dFX+XpGvwJJ+KnfoIlgOnBe\nAPbpwRPoXWDwvNFbTRGe5TywQR6S9FmSqWgVBevUfDb7/0YYP59wdVx1utyL\nhgqjK5QNQ8zBjDjQI9PLcs0/+5gVhpPwijxDKnbznXunhfVwLZjJT1viZ5dG\nnYhucubJwWML93/b+bFcFKQsbTrHFJzUHcMKdIede9atvU+RSyR6vePCwX1R\nyc4IuGhTj7t8R7Eo+7h/o/UwBOM7oCBAESI2boKHB3zWnUGKOrXC/zWeY4YR\nXfPI4hL1LVsT+iS2DwFTBQdzrTbY505kq9RVc96Qv4e+wxF00WiWeg7HTayK\n3dAr\r\n=LkFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWDp32QkS42FI5bu55o26J6IS9TNPPxaEfFp0mhndg7wIhAOaOVpN6w+MjhNuKOZoMl0zn8DcMXpHq5097i8N37Wcn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0fdee204.0_1612377269247_0.7539686104932346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5160e548.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.b5227247d.0","@material/dom":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-button":"0.21.0-canary.5160e548.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b5227247d.0","@material/feature-targeting":"=11.0.0-canary.b5227247d.0","@material/rtl":"=11.0.0-canary.b5227247d.0","@material/shape":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-RZLvXOKgrFv7uHZdPAZ3lVjpyFndXv7BvZeOht5FXiC6TqDxRpkKEb0P97tXDF/OBtzM9k7qRA8jz+eSaEsHTw==","shasum":"dce578b555c292796f5df543c6de1a1a45b1c942","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoNCRA9TVsSAnZWagAAFOgP/0pZwcfufE9shLjOuCg9\nUY1nEqLGS2xZlZYL63O78dzlGQjjOQivpcqBkM0Ezd7O8M+x6ZodcZNyTv6Y\n2DzRn+dPMJQ2cOOu1uaMhjN/O1itOyu6p6v2xP22IK3G7X1HV7G+gE4HyTIf\nnndyLiMPWyXfIL9rLhQlyTAmTVn++4OoFzaOAY7H+zyilJBdEC4ttr/cFPYN\nKmGudwD/X7SdWW08P74YgKHzt8o1XfRKAZ7/zIshu3WNd7tvxjg3PlTu6yjR\nNx0eC0ZkWjRNUDonH4A1ICHhi0ayMxPqUnpE/olLL7NyGSIsSbgrecX4LIU7\nAHQq7Xo2GbjyK8RmtcaoHFuGUP9UXyGLNhw441X0ufsRjqXBdjRtizUh0qmr\nJ80Mo/2YoGZ1m7jSTz8HyfFCG2pWWjJW6ABvzd7Rzx2b8C0sLSyLVnTUlBd7\nppynxwB7w4dQxPm7Rzb1lVJQ3CCmhWPkikynMq6VzdWdcPLVFdPxn1O7Zf5J\nENdc1uvUgOpR74uqiNFY8TpuFLkUNmEgFRMvkdY5J0djfeaueDvFHfFJehNg\nGttWNd8hQiadJLEDXuMACSjmgPZcPPf+8fXMitNkmi1qdIop5Y/4/dESUK46\n+ltzsfGaGBzW0B/of1U45T1u1JxNoa9WBI+09TcVmWmb4MTyC+LKo7SG5PJ/\nOU11\r\n=+PGG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICA0128vn+IDyciQLrIS3WY4H4IjeokSHrb8S53pgqQ0AiEA1r5iqTJBgfqt9hHbPt2kF2CzKvT1+00nxczoiTHil2w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5160e548.0_1612569100722_0.8857564663071928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4fa2daec.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.aac8f5d9a.0","@material/dom":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-button":"0.21.0-canary.4fa2daec.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"=11.0.0-canary.aac8f5d9a.0","@material/rtl":"=11.0.0-canary.aac8f5d9a.0","@material/shape":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-0y8vxoaKrwwp0kzF0BYoqPRXadUit2CGImSn7rhFnBRplPAYG2npI/K9CnAqrelrfx04CDviKOGTvyqsETowhw==","shasum":"96f485920e09a199aaaf150c9702382c2365235e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdT8CRA9TVsSAnZWagAAtRwP/38ZrRjYf3eBd9OFbQc3\nEZDQchbOPeXuAf8yA8SuXg2czGbij90cIjIJ5bIpyFbNEuA0cjx656QZHy5w\nUpfghwJ7j/x7YXuD4zaHsGBn40r9yeo5AT82aQ7pGgFlxoKd9fR+ZxEpMm4X\nVNiqiBYT/Y8kD2WC9Aat/Aor93TAODWR4isGlQoxFkWT4+cZpSUPiaIKX0gx\nwx5ZgGmiAzRcp1JGi6sbqD9ooQruYsOKeJdMnyLBaeoXTktSJGXQZaHq3t82\ndUpKHh76k1XgHcFtmQ6iLNo7Y+MrhGzwJ6vsyYtQ2R08wlMbl+IZiBB1KPGC\nUJGMmufuVJSmAdSR24a+ndfLxdtxthURXUpnN5ySwceXHnmgnv1IVJSekgzh\ntuC4ZLPrzCHG6jPOMC2cinVjwD+i21WZVibmCkJOd0v2GUIrBPXdWRdgUh25\nNK84XzZB4kDwjSWtKQOTSJ5xM3Xb+rYgfwhxVFPgzzTlLs5YMd8qvbutMmIk\nISBgp3MzN6Pj9RymT5Kh9y6lOW6EkHfpBF5ZRmDvhwUKts46FqH88eeCcaj7\nk5+UgI07mGR4+erlpYOENmtw9HQWDQeN7qsxAXHIVhGgS8fHLktowp1dj7vZ\nSnsb2wPkrxleBmc5RZzAHnhznJu7z/pPzEpaVcdTxVYhm61K/JvbdchvPqLx\n9dFi\r\n=idpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsYx0PlI+Vg/s0Fs/H08HrH2fIV3QUsaxZmoIQ9ObdwAiAIxYNUAMAcm7vfFAHG5tiexx/hY4SxrFg8Tl+OLHZpzA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4fa2daec.0_1612829947919_0.48744572864500824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.67f285fb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.750e18fc7.0","@material/dom":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-button":"0.21.0-canary.67f285fb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.750e18fc7.0","@material/feature-targeting":"=11.0.0-canary.750e18fc7.0","@material/rtl":"=11.0.0-canary.750e18fc7.0","@material/shape":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Qk2GkUEByANRunOVfaiZILsXL21tMdfCrR6FPWSUFmtKn32E/uGsGOzDBS01Hfnh3VXCRi6Ot5VVuvTbyTZeXA==","shasum":"604545039a7bef9bfaf4f43195c35637ff92169a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyUCRA9TVsSAnZWagAA69IP/0g1OO9HsvBrPNQLvpWM\njGgJrvXzCssdAGEV+n69WQG23UTgdTesy6oYkCl88pcW7cmMW8wYj9eQFsk8\n2Ru62EHJ4w+17gM4a8Sq6kB4UEkb0P4Xiu7FlvDJC4aa7kTpif0WHh5GHf/v\n5zX4X9HHC22cMmJb+wMQ4Rxz/jNoKzxqWRzF0vbx7n0rJLV+Wngw8jzNNZf7\nCdTTllwLMADf/t+/xFLuwZ2T12qEfN7uzUOHUEaoR49uG8lWYjyJ6fWaBOk3\nhwnecsDtif0UlBC9WSaedXO6zb1WbO8SJVEUNG1Ooh6UzIe3wsc+HlgfcegY\nYb0qRmf42duem3cVqI49G5+j+4DiLUzGgNz9JJFwKJ9ZGr9C5fpRGDuAU8bi\nkbh/W6FMaGrBcCkubvMVZb6JbHh/bUVWKF5wJQflPdNL2imSW+45Q7tXsheb\noJTNd9609EpupIWgPAoXxrwyOFT81FwNwEXtpchCsyO9DQRHBBRAxNCxba65\n2ePbL4m/4cNE9UBI227oGYlpWNyiB6mIVcB/tBD5tz6V8d12nVkGH2F37MqO\nnkVcJ63VO/sB7wKd36jiSr9DFsINoLl1M/Z9xfmiOuF1i6Pbj+2+BkjOsy9w\n/SfEGVeirEK2PLKviGO18X2eTr9ogRbZsVXTemvjw9BoIPJ0BEijy4y6EFfG\nwFqK\r\n=jc1O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEh8ZehWv1yXDfZD4JSvWtjMBJ8cV7TFmep0zfrHxPClAiA3qGFg5PIfBik1v6nY9jAVeey5nrN/+2a2McRZ6CcevA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.67f285fb.0_1612831891677_0.04124969217955732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.58cd5a70.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.b62b1266d.0","@material/dom":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-button":"0.21.0-canary.58cd5a70.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b62b1266d.0","@material/feature-targeting":"=11.0.0-canary.b62b1266d.0","@material/rtl":"=11.0.0-canary.b62b1266d.0","@material/shape":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-2q7UYATVnYqiPq0j7ysruXnPt2HvTwXSKTjHW1v0DZwhX5ys3BNZfCgc6PiXgagscniCvi0bnr+Lm0PzzLFRkQ==","shasum":"3117699c845190e49adb771e7367d3611263c92d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZduCRA9TVsSAnZWagAApDAP/165ByN0PN+4t7p5LGkc\nqw0VBg33LmEtnZD8Orf9FwF5wyI32/H5cnIEuNkNNjl/WCSLKHpGMY5ZnPMQ\nTLzMfo++JhktftgA65gKPrfNmylBRZFLuzwuJ6y2onwewOYfqjWMnOGyCQi0\nvlcyO4cT8LNSRZG/Xf/8gLijpQzzi6cHpwP/8rm/JQiduJxNnriQw9s2GMZ2\nGWEQ6bIA00GnfV+tf4JzvQGrxu3iY5Vtnf1QypIdZlTvfwSwJOhJueHtah3i\nApwRiO6PNBxWMJeWIrSu0tLceMGPz2hHZEU6XkLKigXMab4dF0ZviC2y/UMb\nDribIlDEEdF4iGtAYmpn7vdZJzcT+XGgsf9THHCnD9xi2hsZpeMIvXnDFAyX\nbp3ru44kTzapI4k7iRdPsQn/z+osfjUE+sj5piwprnpRfIEiFzwSsnXog7co\nFC/9//rnwVbF2feJXuU5q3BdUsJOPvUF6p9gipQXVuVVQf+p/3dKAn/gw3FK\n58135YGi9urOZq7O4BJqOVZv9MGwAMe8zyOqHD1bq6lRl62My9lcL4hrwNqS\nezhqAk2603z1I2UTN0H3slQuLuRSZ9TrdUNn/HKUK7mnJzTpfvcMAYYeaoEy\nhRxYHGfeUP9R3PC5lGk/vvOJeUVoOUT7cir4TzXcPvLAm5Bx7F7/IcFxZkU5\nQIbB\r\n=pygu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbb3NwYS/42E/SPJC8A2p7AA+NJz/ivqTG2Wdzj9bg7AiEA7glUlZaprZi2MxM7ZuC8H7wWTxK4up9zow26/d++zE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.58cd5a70.0_1613076333757_0.9478748915878115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.8107ca43.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.a6b3101fb.0","@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-button":"0.21.0-canary.8107ca43.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-/AjqeA5PQMiIr68X73r/NLw8CiNQMKK0SCIWZUKjvYJbzLQRd4vkfjhGvL/dPX557wRJH+5M9jZ7U2wXNrCs9A==","shasum":"ab5986a4870f77860e480bb652115893b472c81a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3RCRA9TVsSAnZWagAAexwP/jRXPpLLVbuxXmXdkRZD\nn6jIR3ddAnERcriU608pKkxgfKUDTAZR9YaZZQWc6civ35/BkxSbiThIlBa0\noABUY1NDM3G6OT0WL1P/T+0it3XuYyS0idtOrVvTQkP4zN8/oROXWCv/jROe\neTX2Kv87yjcEru+XLHj+fUifAXTKWokoX/hghsdNhYPw5FmtCzN1GjamLkZy\nt4SxdmcPoFCNTt9FHY+uNQl0wd3ABa+B1v/ZiEF+8V4eoKPlD395/vkM2fEB\nOYvQUeedVfOufuND45q6rmN7b5Uf/VEyCEDdqyrIFcTPtix5a39ZRXDc4BWL\nEb0Q6+oORK2eQsrY2Jqbiu+rRl0SHbZY9KX5GdgOfSp8ysdG/fetsrxjx1bZ\n+ywvbVxYl6jmRIDCFaiCfdRpNb424D5KZxRKIavVSucL8pQnhlYN/tx74X6C\neLAmzvWh4JWpX+UStDMsnAxm0rXSzoFNRFST2oddhYW6R+rYJSA1AiNE7fMN\nnYWydXnk1M2Ie49rVTVCq3C+Ca408r1Wm9qDoKPQdKWuEKy7Gw6vDwWp5hx6\nFAheXmUZ+4RmSjQZ8MURVXc1D0XdlQsezPtGWfg4CnJVpxVtAbauTi6yObJx\nCiIpiw6bmrYWPmAAjAtqqorK6AAdJIDH5EpQNw2tz2TNeFzt1oDOw3CIo900\nmrE4\r\n=vu0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFe4O343fNYBPoxniURUIKRixMFqxTa5djjXW0GDePMzAiBOb6inv/VoQxq5oavh8c3easp/Hy28gzOCBYTgnxSZDw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.8107ca43.0_1613086160764_0.4166266395560181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.d35d64ef.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.a6b3101fb.0","@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-button":"0.21.0-canary.d35d64ef.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DS87PiCTSL6SPWT03fWVoZUO5S6WkGdbFsOI69FLKxOgUZ7n1QxgqzxRyjxIXBIiPjY3+orq9EONBX6HufTjYA==","shasum":"10fb74ac0f5e58f96b3343c0c1763d427f37442b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEhCRA9TVsSAnZWagAAUZYP/1Ru6E+BPzG9ls65Vpyl\nlgaVwElhqryNunQGVP7kz1TP5gtKaNs9qPRERebr6JEr0Z4eqbsYF1XZtqrM\n4HDHyIIGqUxUKuQvr4WY/60H2A0vIgHc60mlE9Dki1TgJBSBwfkv0hE6VD+6\nhhrlUI1FmVIecLnoqKm7yAB8bLEMoQe7CeElChZqF4DB7WKMuod/0AEBkqe3\njhlko7YjLVU1ZSsUidkRfioGhWrdiBYF8dVxwmY0CkbTl7KQflkxDqqGShlw\n92m87tSatVtlGcbGqIsJyDpxUtFFnl7rx01LgjWGkoKkoT76b13ui1gyednk\nx9JMk5HCZldbSYFHXkUvjwfp4Stnr9dTBeCGUC+lIYU15yTXHwuYgjdZWMQx\nE3Zzf4dznCkhThW5adM3xepR9bVf39Ux/mPjVdcMupfvLf5LVZcvXsRDJ4OX\nARUqLjdqhtrdUJB2tdxZxBUCsL99sBhiDFpwPiQzg4Lycv1DR5iUq+Q+vO2U\nA6V27Oq4s+9dFGgQxj1RwEcxK8ujSdlqkjPKLiEumIRwj4DrX3VPuVi3Krfs\njJ+e+ThHYj6cztm8Tv/HgnlqZcW4ePpILEN4sKjEesHkbVUvH+yM1PbQn+Do\nOVEXLBo64ZHwpZeVUoaO0eRzqHsP5azuycPFOzfw/JYUtj3y+QINxShL+0/a\nE8VN\r\n=ziJ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgC8FxC1vZ5f2N0s8V5SbH5sJ0DxnTfJJikV3wTSdpwAiEA/Rbv3vVZKKyPw3w7VBROuxhPSkcoi3Jfm6ZLiHDkcrc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.d35d64ef.0_1613087009363_0.593342971577677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.78bcf058.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.a6b3101fb.0","@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-button":"0.21.0-canary.78bcf058.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DM+twsY64L5LKmhKuw1PHKltT2218ioOtGBbkv5LIK39etxyP42K5g5yRkQB9K/J4F5/MAydALw1mslNZx5GPg==","shasum":"4028a87e8f534039f5162db6ffbaafb122c1f5aa","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBtCRA9TVsSAnZWagAA0ykP/RlqNCETJ/A1Pa6Phe3U\n8/Sx/1Wkp/aaC+xLXnXVJUpasE+RTHVurAV63qK2fghuY1t6zhY6ChfpgOCi\nYhtoILG/R2SYfKlMq/eSpWybZi9JKMu9Zu6qL73JsSccXkTUJEnhFJrrjCfK\n9kSTQHwBPcUNbxvSb/UoBchVZJcBCIoBc9hf5OhDkHHcSGHoYzip9XBfinr9\n33dYygGssRpdGxGWYmHPlA8j4p23/Ia3/Y1tR5AyroCDm+ql3Z0jwShX4m+Y\n0HWxFylarN0TRmywuRxd9eBF37Wqc9Pza1Evtk8W9tv5x6HpfrllsWFPI6sE\nPCWQ85RzdlSIerlPc+GB3CCeBlG67L0iqguLkjQ0veHLeLlW5M1pS+wT3ma+\nUGGXfxdiVxM2niW3DL/by5jvHxurh96k54lSpfzPq8XUed4Jd3ucgK9EdVlj\nSF2HhZi+Kg02piTKoO7L2kexnXMa/i+Ro1FfZtuo6rC9GIceEVyjFzQV//lr\nP3Hbg1LcxFz9d/eoCpP5bUIQ6gwGq/VjjtMqutZh2ncm9wMRryXzIqDHHqBk\ntUXgODK1goKS6lzKeOaZcDRGdXMcjI4KxvEXnL1HQPWhYhTSiMvlNxK76jwi\n6wsFXT4EDp0/HtzkpliIp47WcvDllH2mhOQMvq/HoqmsW47XhfeBwIkgYjxh\nlJwy\r\n=Qqvp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVmC/BIqcN9K5QPyN75UYEEtXfmkqBb6nSscyDro2ZTQIgYt8zxlIjplj7wUe2SfvEqGIbiYIbygr3qLW1bHjQUnc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.78bcf058.0_1613090924621_0.8366587702944681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0c6908fd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.ed88df700.0","@material/dom":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-button":"0.21.0-canary.0c6908fd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.ed88df700.0","@material/feature-targeting":"=11.0.0-canary.ed88df700.0","@material/rtl":"=11.0.0-canary.ed88df700.0","@material/shape":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-wa3fuFhS26Mlvai8KhdGA/vYKoW+7Fxbqw5kEMHKyPuBvVNOAv3QwApQ7B+4neVTJebUunBDH/QjrzjXAkL83A==","shasum":"88d2194861299ff5dff816800435e36fe8b7c66f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdj9CRA9TVsSAnZWagAAdm4P/2I4QrvPoUYvP1HOCTu4\ndToKxtxTJgDsIzCNUazqUYMv2HQS0pYYSRmoOlNgUp6JVexihg0qtiCTq4zB\nG/80XWR/Uqm8bbFrSdgalpm/R0Nk6TZ8FRwndWIkV1Irbolhg7YoTi4KAjKU\n2BldxlXmDwRR0Xu7mwBj6aGgRqHoDiJnviDxg8iSGT7OeeBkncESKT+cxzXH\nYT5FJ/raF6pdSIR71knv/eZQwKGHVNCbmi7K6bGxrkMP8qwepFddQjuKlOAq\nGAfr4jCAy5iRSEuRY4d8a/iRrT4JwVIVPPG3yfXttkvtjaKoTtKdQE32wSlK\nMrKeNhzf+x2EYth+LtyIsLGIFQuMgq6DdY4QxcyMSDGmLZcWOm5qMIfkDSUB\nUJRJDDSFv1OBP2NjKg9jVloR2+RsH3TG89MkA0W+kXDuncWWAdS1rrsVNqOE\n7LZu7so5xQ4GHmVdXWUk/wuOrD/y6gF/A8eLRo6HPzMI0RzWaLXiK1QbN62r\nJjVwI4oFDXya0Cx3domNBW2xus0Do5nwVUQAGrwHJJx6dEeVC4WbmSx5cDCT\nZhy/IcQRRCKb7HObvv0thVup39Wtee8claUisqIRoIr5yMh6zg1COufzH8X6\nqcDIfI5UNyQR5m0zEgp4/7BIe9IAFEIAa9pd5pFgU2SDAFsXsDR8rwG+TpYQ\nMHqF\r\n=A/Tq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYC6YYF1MkP55Tj49s4UFaa8tNAuBq2vbP2yN2zqGXRwIhAMsbYNvhW5lhgtO31BQOtRnTZHHzd136Usy9ebeta9TN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0c6908fd.0_1613093117537_0.6395336189575642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.71fe9a067.0","@material/dom":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-button":"0.21.0-canary.f1f34ee0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.71fe9a067.0","@material/feature-targeting":"=11.0.0-canary.71fe9a067.0","@material/rtl":"=11.0.0-canary.71fe9a067.0","@material/shape":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-H5ogjEa2VCVlwzQT4tbrtAf7H8+0rEFFa8Llya+MmOMCojgXEtPsNp8F+0hYsZ0F8kub76I9B5eyCgGdssBTyQ==","shasum":"04ceac5794833b247b8839b7597c9124489cbf91","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKYCRA9TVsSAnZWagAAN/sQAKJyS51N8s9av+sR7i0g\njCfbbt1U/rBfpNch1GFBQMwEB2jFrp0kZJy5KCOTtpyqY7KgeQB61nXINToX\nX8W6oiiuTED1ER0A53n3tfkxQENsGelnKU41s0O2j5lZaH+K1s/mDp0G7BMh\nuI5DQOoJjztZAv7ZBtOqC4v9gjVj1Ia1oeDPy7yrgVymVXlfzyvqx3ln90TX\nIvnufXV6H7kmRNWj7yjkIOIMDN4/2O5l97bU4gBgH4tI6VI/SerdbBH1gzTd\ngjLBr1jIXqA9ErVZ2ojWfuRK8HDoecbiWTrGoeCfkfZe6Qekt1sdOtNLnsKL\nWTl6jVkWYRxbanFk4mJMF+qwcX/0I0cfCnngxiXihLQROpXsojllLg50Zn8+\nSHxEc1li47WEvq9vgfk4oVOeVgrMPFSyK1u2fBvHYpy/vm/PaecwysMROnnu\nnv7WR33xT+f1y5qlnPtshIZBdd3ap1sbgCh/htay6gcgP3Hqe91MqcPE0wN4\nrBzNAqti3awHDoJtXXtL1T+wAmfNbc6RqvQsCNxXwZ1wdjfmYUnvOmA3Qz6Z\ne3FrnmGSqs+4sQWPSbxc2dVyQCiudMeTc0jqlrbOdATxW5wGTzlBqASpGVP/\n6/tawL+39gWfhMnsX/c1ktdjXa92xkceIgyS8xbrVzEmrWyn1z0nuE7cg3CI\nKG2y\r\n=bwcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvYz9WsvFDycfEUUEvPBfoCe29++xNstNZmrI0ZlGYlwIgM9+FoEsSFlicuLE2nCH5s96jWLmsXz3Et4w/TklIPv0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.f1f34ee0.0_1613161111820_0.8724136952991872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.d84df029.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0fd56a86b.0","@material/dom":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-button":"0.21.0-canary.d84df029.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"=11.0.0-canary.0fd56a86b.0","@material/rtl":"=11.0.0-canary.0fd56a86b.0","@material/shape":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-COW+oywNCyKd3d/zTJ1vk1qMBq7oK2ZkVCWDJZtTXczJ3oyrzW1paltkwDQHCPvi8fc9fv+XSywHZ+LCeYCB2Q==","shasum":"0f7e0090063707e4cc2602e9773a7148025d567c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBg3CRA9TVsSAnZWagAAL5QP/R0/5uosqcBDzHjstkIz\nibI1iN28BzkBZF7EoDl7P/VAGEdA78BWDR2Vy7LqLAEzDKUmsxuJGWIEcnmM\n3phrJK8FaQ7SK7nzwXDOpa/sVXxFWdyA98hdVKJpo3efph8IuacNXlXfVhDj\nw7wE4SNYmuALtSDL/Kih6tL9n+azDyGaOZzQVcpHchR66I+BpSmGmsAXZa3W\nlyWhGhReGESqLYGYjt9USbohmi5mIq8Sfgr2o/Urf8s7vmlZwUTik6BMpizA\n3imZ4YUQM+q1EVf3XYF2mA7qJkE6ZzabiW19luqLXFf8K3QWHYfqjjPvAZRo\nQRum9scZiRTGUUpVITqm5a/SUdJ5It97QC5dIUujLxHCSsD3Z0cfmsEeqAWQ\nwf29tXfL9rXXPZHAZ5xQ3ZX9qr//jVZAEosUIZ4pXfwSuCvwawFxDaeti3x2\npJJOJz2XUb2ea2EcxkH0LFHycFyy3PPODO1bRzTv0orCbz3loBwlTItpMKfi\nfb1tU81BlbUFnXuKYvWDsiJfWecyqEpZ8JJ2leNeeKpqr6Z+5Fw+/YUs6O6x\nb33rir5e6rAMmAaiFEAM9REVdBzxJSh+VapVErYgRkOv0O3VExf9k2Hiqqyv\nZU200Uc4CzbFcVWlCBrJtcyCWXW1b7g7CCeSB9RAT4J7aDwA75RSo0LjT29a\nUPIT\r\n=D5Qm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvzIZCXpk1hnGi1vxjRfWQ/+duY+pZs82ImoN7FwCQJAIgCVgvqKumuhP12SL+sI4/6lyumdfDmIXQf35/V12QW8E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.d84df029.0_1613502519320_0.5695394338684052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c525f471.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.f9cac96cc.0","@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-button":"0.21.0-canary.c525f471.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-eqhX+WkBHXQUwu8m6L5fc1Elwg9J/t5ej6A74MPnYyBXLiU3tS41DZ2mFezzUthyrCJ4G3P7+FLdUj1wUlw/+w==","shasum":"a0e56ac1adfa51a78305de2e0440e372fc504243","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJmCRA9TVsSAnZWagAAJawP/00KCaPADyOnTSxjhRqx\nba+MXNN78etH92brvrqJxLTNg1SxNyM+iGXZMv9t5LFGjUsSujmbDvzrdkk2\nHHt7uk19uW9XUrbu6rrgiUay/lwTQ2+1B3lplKYxcIvTxvUMvnP+uPCedGtl\nxWHCNizZXCej5zewgCjnL/J90GZtfv2L2RU04JMLCZCIW6v003MtPkkHPkp1\nLXgY4lHTjZnf1RUhm1FC4yQ4at8gxTLO+WF5yHAnjH6ZdU07io5jZe3S4zOP\nmE2tOx8BPGdm9o5kopumcwLw/jXZYp2mcJSwtNZVV5GQtqJF71O99L8wuPlM\nJyWjh/X54a3v+pFOF/oVaNRM/FRsh2NQIMDNSXF7DeYr/SKEIlNPVXH/sQvq\nUq29x8aMkzZaZLZgChLAiB8Z4RrjCaKUiTOLa+6ruqCAySLd+0rYCXn+PjJp\n1SwEkf8jSxz/nYsQjwDuR02LzboDg1nfjNJ5Ar4g8DzF3MBHz5wTFtjWjHI/\nCKm02c5j7Y64+4YUUjbslFqwYZBLGlyftFvCJqJKH6oBtoqw47OfyVdyjJUA\niDBxFti8eckThQfGm3kCypca8GXO7hSjMjiPA+iMD/Q8j8jDDQrH7sZkTQLc\n6mAI+5fm9v2q/aZZeDOOxLlE9DbICABOF4dSA9wXxyhxjCj3T6bc/CeSp2lk\nGxhY\r\n=tGJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYftsPturqn53eOL4w0kc8xRDIyNCLd0IPcZ4Elksr9QIhAMMirLhfWiQWE+2JihhEnbNOoPypFgIrY6cth7aEwIff"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c525f471.0_1613595238226_0.5130313672317115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.f9cac96cc.0","@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-button":"0.21.0-canary.ba7a1b35.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-4kN9ljU1zL3Alin7gqx9r33fk8XypS/PEsxbrh4Fxj7enpGqrjGR3aJxnZnJsfp9wDn27xuiZdKuJAxhB2l6rQ==","shasum":"786968060896ddcadf367af71fd804e065edd3e1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":103277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLiCRA9TVsSAnZWagAAg3kP/i3wqGp4IY8D4Qswva9m\n8sk52f31K31BBEdMhhFYNuXf1GuojGPaTTpsPH7vW9Y8bwhwYRkAg4sEEpvP\nlgwwx3huvGMczb5vZrgSpPJ2UziFjp1AaQq1zW44S1PsBdAloS99XEc6U2WM\nmOGe75X6WPg/RXJMdiRXAmx5vtmM3B6jQ3TmyRKGRiSjWhai5tRuh/0Z4632\ncufPEp9sw5dOcR92upZt+AayJrhLwTtqqt6mF0hDZ1y8+bMY1pyQHr0K9Np5\nMTjylcOGKcg3cgg/2ssXsm8nI7HLvRj+BzlhENYF/IkdQe5mn3dR9ea7AwoR\naItgk+oJxzIDxKfd5WxEAIqw3+jhdVjIQ+WzW6DE22rExgr0Y4Ga+8WBDksj\nm19+Ekm2stMbkmjHQkfXI6AyAkIxzMoJA+/69DbBXQhemMxSh06u1+HAeFRS\npJwLd9avyAHSoVRTtGNAi9GKUAH8rHEZb6gmVsrtFMqFSoUlDlHichXl+9J4\nng2cL4ureuqQV6bVM8yRCaXzl9vuA7OhbsMfU0EGPpxMAyZH4p5JDh469M0R\nhnjl2QnVjXaXvx041ZilZwYbmF9K7K8BWNdOTxeoeE+kK4iMuXIqe8C91VlT\nyGW6cRpn+NGNkxCnIG+WyRBdwZObLva0/DZ7NWtfD+jQxtS+5F1V0L13I90Z\nJIV2\r\n=I3/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuMzXOR8gvfwDyd5pa/o/Isj8Zws0geFCTYkcgawzJ7AIgQWdgsnBjqw/xDBkDNgEXyR8fmBmHEGzE140h77XuLNY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.ba7a1b35.0_1613693665836_0.9169964303024396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.9a566dda.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-button":"0.21.0-canary.9a566dda.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-n0PE8kAy3gtQOjqD/ty03e66ol8FdIpRNVVs/1YZfgKvAx1QdQLNmFNx84po9NEu1opA0K/8qH8iBEHnG1Pm7w==","shasum":"cbae0536e4df94ec842dfeb93195f3db9be59ad6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":104351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWsCRA9TVsSAnZWagAA6DoP/RvrVZTfjhi4ichjLfYu\nco+dchT/BaH4C/wrjeoGUc7HcVWOrkd3weIlLkjxNau/3ZX8tBnhxInaXPVK\nqW1n7CUknUwKE4yEj6/2W1aDRomHtTgXlxGeILkQS88ktukzvSm4BT31uXNj\nyOr7QD1LDBqWHQB7/IJ3midoTbWPQQk1mGGa5CkV1DpX2Y6dm2McKhUgTSI4\nEtqLrIYSwZDKVjP4JFjwhmaOqlgUudhsGMdIUjRgR3DpG9Jr1ihA6b2yBG0o\nHj9NVOXVQm2BOyNOnVIxFXfwvCcX+qdbBckuubm3o+oBjrp3i7d1fC6ZVE7y\ngDHvx7aXUZvTaUuMcUDR8beTx08BOV9yT906+iPYD05/bsKAx/fQbWKdGz60\nW5wCDZcPQpqVoXoSJFpZUDLIFsV5Rj71UeSkkzwCmXx6cRY1LWZnARROzKry\n7R/uHnZu/q2I/XDY/oPIIDZYwbHOdyOVwz2Xz5Y5Gk5my9waHhYkFc+75GFS\ne5eAGqGB5A7yG17P6A6+3b/zDXngYS3nifh+GWLS4VvwS/TiT+cIjMYYIQD0\njigg0uH2C5T9TDRVHFCK+MbzJrBup/Mtm4AIOjTU0p9APhIysdKi/N1yPitG\nySZbFMBMmRMdWCbzpwxPjvQQykLQiadAg8210QznWO446XAN5/6/Ki56zxhz\n3B+i\r\n=Ettt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFzX4k0pewnvu6DYortPoZgA6DkVKwwLO15y2zwPq6eAiEAvNpoX5C2YCC/y41kmaSR3bpGwlw5m0a9rcLV/tenl6o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.9a566dda.0_1613759915765_0.5334899084656017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.55addb8c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-button":"0.21.0-canary.55addb8c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+WMHb25g7hylLz+rhIKGEqKDKUG+D6wku6MXWl9N7Yk4AyeU6hC0N9BZ/8ai95jLNwt/mHMJYb0FM218y2KZAA==","shasum":"4bad21966bbf54fbd4676916c454ed1cf248e995","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":104351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDWACRA9TVsSAnZWagAAe6QP/iFysh1pQJM2YehNkwmw\ngJoLjtdDtrSEXu4fQ4WhaW2Ng6zdXyVL7HqDzfbHBqxtZWeIyBVe2MAbt01/\n6mlPINWWAdlCsMAbjElwo2Tw5E440P38u7u/N0riC9YR16UBDlHpGI06f0kL\ne/j7Ga6CVqb8ncGPTQVY5p4HpOjZdngk47GoKpg3xgKMkIDk1v8Gw4QHsGD0\n0C8XpMIKPPWxK4hLO7PZNTcvzO66/9afufiMFYDrlpG5SDtBXmCEwfXvmAMO\noPZhnBaQ5qj/MchsoBHlrOLnj3RLNR9JtYIPVn2+ymiHmZQoci8Pjf56ndzY\npDiholHQJU9SVJEg02RLmrwnzh4k6rxvYjEwwxCt3c5cqtZBeJ/Cy61aIqcU\nY/Mvto9fMsqCywLIgA2XCirRytRvm1cc/7OvYq9hH/FDtDYNo5qx6bcHEP+R\n3+o/AorJ+H/NQIgJGnq8UIXxSyZ7yPddSGgADo/8ckCXZ2mXDM+/x7lfGURp\na0gKnOcCw0sFCl4aV50GjbFnuNzOm4DiYMUWqeeHv880uvS9fowRwz6VdYgq\nwrmkwz8mnisE1ffluCzSZdiJfwcVk1HmgeecF9r4Wb7uvselWnqubK+X0hW6\nOJnnfGrL4ITev8Iiwh1w68Nxm5gWnFtcVuI28Y1zUByYLkG7cmcQ0NHIwwKc\n/S9n\r\n=sf7k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPERx2JsKwWVdA6Uk7XjyuaLQGM6aFsP3Z7LNB4IprKAiBGCnvMUiXXLhCZRdzdyEhscMvVkbm1fjH66kP14/gdNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.55addb8c.0_1613772159844_0.7024035563969113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-button":"0.21.0-canary.85dd5e9b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-QENby4mwndUp+kTTM85Ubv9NMCYM8EVwW4mK+qWxyLzNaPxycfkIAOD/rhpemUTMzl28CxqtyDWTBj9mcezCuw==","shasum":"5effa65b097d634b50f308e7ab155b8413b01f0e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":104351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZKCRA9TVsSAnZWagAAb0kQAKDbYFXX1oO34H7x8ycc\nKbEbJzBPt06NiFC2ZqWB5vo8jfXXkNy7MSZ+M9/yCLKg3YLiVy9kZE0R2zEO\nKGxzdLi4O8z0ThlfC1In2KIGKye0AqTUeiGbnDVmDBLt8L8wuvJmWFZHMrPO\nbph1cfx9oEpfceAC1LsF2O93BBxBn3q4xtj6SCxdassJ929ceA7wTR0jpXX/\nCev+gu7JrefFyvvYXR3ls9RYsWt5T+ki3M7cKnHQbee/zjb2NDoVsdr42z7n\nhRDCCdkymZyWlZQBADkloX57i7/2O08tpc3NZcgPv5aFsc7KesffDd1vmarV\nvbxw2k69T7nfLk9QEzpTieJJlRa8F0fF/KG6rcBarcSEsSc+1KV9Oue9kxG5\nCti+pqCtua+HXsQG5ssVokTmbckOpo6/0YTMpKpQ2hyWRj+nbmUghnE5VMPb\n4hYsDXRBaBU0M6TaZRO5Vsnh7ChxgVHLPKeJv7CLsyzTADR6SyXI50Y5WfB0\nopWNdZ+rvcxbT+7Y63BUNgAb+V8DcUdnC7tVV/8vxc9Bhlu1n/0us8K29+6B\nblaJhmoPaoht5ym0/0PK2gBJ/ABhb4SYvDREB5Y4KUW7tmznWg9BRt6bM+dJ\nhTiIlfEZO1XFx3GqrBJpmrpX2jOEXd7ivLXv311nBR+vn9AOWWzLjiTEJz7w\n21uN\r\n=Anj2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsujUHFDTIiRaLoFvSfgkqY7gzOL0/PI1lVatBu4NXIgIgQGVVpKctFI6UTTTmc2v+uA2IAlEHvaQdRChuPCjUOnU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.85dd5e9b.0_1614046794500_0.5018502510024556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.aa3e078e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-button":"0.21.0-canary.aa3e078e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n## API\n\n### Slots\n\n| Name |\tDescription\n| ----------------- | -------------\n| `primaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed on the bottom right of the dialog (LTR) and above the secondary action when stacked. Automatically clicked when `Enter` key is pressed in the dialog.\n| `secondaryAction` |\tA focusable and clickable target. Typically a button such as ``. Placed immediately to the left of the `primaryAction` (LTR) or below when stacked.\n| _default_ |\tContent to display in the dialog's content area.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| -- | -\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value\nof the attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements:\n```html\n\n```\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and subsequently\na `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not have\na `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\nsubsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\ndialog and fire a `closing` and subsequently a `closed` event with a detail of\n`{action: 'close'}` (action is configurable via\n[`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-iMBYXJhZvtJYQ1Ezr0k2AaSiNHEclnUkhS7ARcLZy0QD+ClN/5Z/2REvio9f3cKTrTf5rJAVphdS8uVxcAZF/Q==","shasum":"9c66b0dbf89643a00c7c6847d6b23f99ac01c6f9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":104351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgzCRA9TVsSAnZWagAARJ8P/RciOk5xqBP0pTT5fQd/\nDtEUIQOVh3WEDCytX6MiQacLXFHWrga6wArWgFTfUq3NP+Yk7bda/+3m7TaC\nGfaZndt92aQf0DP94BFh+e+9RXYYNscugty2ssk2/WsWS9pMV3zopehkeNyd\nwYUSFHEj32mHqWRCdoJg2uS3CDxjQaM51MqnvKxVhydI3otStYnYldHvh2S2\nBLwI9GXiy9AsS58F1xdeHW6bzTe9RzDsnxsI+XNRxBiL3w/oSD+Vtr60UM6l\n3CanIoolgbYELnWogQOPZVtWC4wwCYAyA3zuUywQRlvAKXjaoMtCoNgLe/7s\nTYK6UM4OpwMLIj7JAE8pmglunRm1VHZfuPgPSI4qqMFbDjFwTmbyvltGrxoL\n/VDAyQZf0RZOcKWmiilEDhzT38+PcJuFEJxvFZwLG/hHo+J6pVPmTGXr6q49\nCuYpdk1bm/Q2UYRcbAkt+DyaTTpp1lTDyen9XdmJz7rQpQTIv9R6s8aeDkM5\niq4bmJYKNEcPzKo1vIK+9ARidwZmIfrVEfWlqxqON48fvIhME6iRq/ivMxnx\noq66r08C2h/OgsGHvYy7BbU9c7CXVKwikklndEHkCRH05KPvPIaFaWQQcL/q\nnQphL+6g2oAClMzcLfqdmjntCBE1p0G6Xi6lyQ1JcOQ8NlefZCUga0cbVdvR\nnrbt\r\n=QrZz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjy2CnuvR+ecTHYjrQK4DvQ/4z30XfPsPdT3B68HqEJAiEA87F9EUxF/dRZXdscmG3Opw3BoCjTdg11Ac0wA0PdDHo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.aa3e078e.0_1614100531185_0.3104053673527496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.dccd254e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-button":"0.21.0-canary.dccd254e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-XPI4Xh+yk29YnQX4eXGqBJZg4PSt5zMCQ6F/+3uvgzyLhJgEFKo+945XtzRYYpHVNara8OHhL2QF1XWkbdp6Eg==","shasum":"f8aa5db7f4676afbbf75a7b14f30d862d318156a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":109288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPRCRA9TVsSAnZWagAAMUQQAITzhMKxG/7Sp6AEUjNi\nDr9F4W+iXhQoqQrbu+JLrlx/W1vgB9Tw9Eqmd4dqvdeqztNqgF8yfaZN+I2I\nv4WIYnSGyF/UDIsl+3Q/WH88mLjsNL1GgiY6c9YbeNUyXpeAsw+NNY1bnySu\njYZihRnWe1/F4ggmhrln6/kAMHd/2W9FLQ6GkON5RykBl1fHmF6G7gx8NVex\nQR7xk1BSQ8RdHc7WWbfMipStDipj0wKDY3EC6r2oLnZR0yGilLahEniZws35\nPzTdtruBRyt6i4FfwRV1VF0o9V3qML3QlG3ZvrPf4wPkM+yDJfzlDUnadXTz\nxyeLtjlJ19gc5s7IuaA58Hft0KaEo1WPdawiT7DDTginKTzSi/g9ODb1mFx/\nwsPTt6bzstu6NUAareqVVdqnhvv9PhJsbsR8CX1gA3BICbzQiEeJz7642CsP\ncbrqC0sa7LB8AVP1Kh7mw+/gsHvnnw1PfUNYOUbVsUZAeCcIeIRsxhx+pMte\nANgSmZEC0Nnm1DHclb0TJHCGxGrWwRtlcvapqOHzh3ldPlGmZuf0D/kTeCQG\njhImGT1pOU0VNp0CEsfB8VRgiwh4MiveH0Ft5DwkSbxbaaRyCy+0wVVqo0f3\nw7zZhLL5QMkYltcSVbl5OCtkO3F5CNN1hAcEQ2s7dGenQjMkFtfkzV+C+0a2\nII34\r\n=cnNB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvVJhgLp/GmiR7q8h6yI/XoAb7BC/O8keqaquUWyBkvgIgcoBmExXmiLusOdLZf+SIaiFBLiKwRqfYHR1zSiUhU4o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.dccd254e.0_1614373840819_0.7132502317364668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-button":"0.21.0-canary.7dd1a27d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NrYElcQkgS1xMBWl3GOMmLK04I/ahNNyNn8MGBQMSd61akQstpntfxIsvhzhpD1gZCz5/NgxGqEbB7Tysc1irw==","shasum":"c7985fe60924f6ace06df6344143a81132366808","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":109288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQ/CRA9TVsSAnZWagAAPdMP+wVsxGKX1F3UDcNTTgA5\ncjuNsEymbcxbo8WolaJnfNjx9IkkuveyQ75tQ1X16c7tcMcYzFQ9Zf900JOv\nPWe0iu2+wxQ+bWmBC5PtEQenDYVDPur5r/LzMqK0hb5sQ1arVrVxdV8bsTb4\nEpjsedVPXVfms/FZl2VxzGl5rFfevOUaESRUZon7A9i6+8ctwhefBhLARQ73\n68tUyXUM23BucerEKWFtDlAngMvNnRsGTcpUcGHo0Zn98SwoYpdCJegjB7dq\n3keeryP3E46dimer/cPElyJ99iEC4oxa0FlzF+cT2TQASXFiURjJaPNqtbGr\nKkCZs3o7eTsB/GGuB8D5T4rNZckucVOE4qjZaHBWSyCt3LazXcJxu/du7hEw\na8qq+7q9mh6Piyn6VCXA9F/n38SB7I5XYGDi93rBxSSVVTSg3D2iQJua2ir3\nbTxkymu/PVp/w2iGHFKPxqc+n8Swq3JaUTP5rHwgRI8W45VTPOyzmA+kTR/a\n6K6XtUcw4hWpoCoGcDnadYNDrWTufMXM3SIn0gs+cefg1Mm2lix6EZttJh2k\n4LanULyI4bvcdEMiLYWIo+fWW3vMg08EqxoO27GUvdkJ6GofJFtYrO6Q5zEJ\nnWCWkjAVNkPnRcw8CYd0+imFnT0omz73GTfsrsbgGL6zpf5VICmDCDnyimIq\nRezr\r\n=x4gK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMU/21do/9pU/m4JireRsi1hsQZYeL/qttytHCJ0sa9wIgbUwjwGBMinoFwrwqXdEufB+ZKmLMuZwaBQE4K9Od33M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.7dd1a27d.0_1614636095435_0.048094314573771335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.12574572.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-button":"0.21.0-canary.12574572.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-21kSItq9XS7ChW4i1WFlt3Azlpxv060urVKzHV9mI1tcJJUkp7QU51yVqGTIyjiLDw+IYSlhl+xEOsW3PnOh0g==","shasum":"72d957524d18c05061e3e97f467e5665d6116f2c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":109982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqBCCRA9TVsSAnZWagAAZIsP+QHat4Rp1DiPMAvY4rRu\nhYNIXEObY4QPNV1gi1p5t+BCEF79VNZp1OmjMSSM2DJLtcObgeT6y3CmWce6\nghHEalnaXYa/CQ+LLtNHCs0rx+Nik8g5BrytRD7/rtsCDhkc8zp72Skk9IYE\nNy6l/wiejaLVObQ35lb3BSdZpEzsG2WZQXPf1hv86F5wLQnYyP8/gMiX4QS6\nuvBjUZqj2mwwTnKQuV/UNTEGVVFoiru+M0pHZZtVoYQpvVw22ml5N61XG2nm\nN4EiE/sgk6NhgOhml6O/vOz6v64TcU03plemkbFP4igM/xJVyQR6X7FUuSN+\nMB0nMeG/j2VlmZe9n7dCVjmmAwLMUAj2Ql1VO2159Mh8/51Ataz+CyXr6vsw\n/HzKwxJuRNY7lvNfnWaFTdKnTBiBX2+pDvJKM0eZFCQsH3pvF2SSq6ezcSzU\nMF0Tps3aQNGLyStxmMAI6xoUNgF8yQ+jdVfYBU0WGx4uNeD2t4PCkjodnbDS\nVEj2BENmGIOZFw9LMu9qC5361sn7UxHmpOFTD3phQkqjZj70zeHwxsuMJwuL\nVniG1R6Hk+4OX3qYz6HbmUNtpONwRlAahd0ddRSNZuNW+fa3lvSqsAV1d20x\nu1v4ZqRkFHHn8H+4JyA25hMEMC3Qi1crWgre2Th6kgesWsLPOBwe9sMqk08H\ni2G2\r\n=xPEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMZ6C5OgHYybFK6SijRp4X/5/venYXG1bQW+QgPNoPYAiEAsPeCVaLTx/ujlC/iDIIzmHkdTGXHtt1QegGfvZSRDHo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.12574572.0_1614716993505_0.6725282373751258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.1109a3d3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-button":"0.21.0-canary.1109a3d3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-FIM1P8nTQb0HsZBFJ2+VL02epOjMuBST2GwqKiowBJ9E9j/zV9KBUOYrhdiegSH8Q8rwxKv8aUqzYY5Ea/kbzw==","shasum":"9e603a024ac04f36c44b2782a9073a749d528a41","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":109982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqF+CRA9TVsSAnZWagAATNcQAIp1gVaP9mupKYE9ZWQW\n64EcY+1qtwvo6wipNrH+MO/TZbPl+PN2lZidXWlTwR2bAN2lndO0j7Uwrqdk\nKuBjDu4wl4m5aGbeobVQT/wBPSAueiwMk3YicBv6sU43zuNzBLzu+gpytSJz\nkQoYC0DkLZNND28FVECU1QX14adlv3T0xp06QIgxGc7pbNwjEm3SZV2+418M\n59M3iR9nX/14+ZLb/yoFdIwt6JhwcFX2BoRc0s0WWxkt4pL+xe8vbhFJxIoM\n5QQQ9XbwwSKpkiaw6S0RR4ccvOMk6Q8lWvbHI4vOZ36DH0uc1Pf6MXfN4igx\nhQiBag4YnmZaIQ6df6iauEUPbbkTBM0jo7eqqGkyHQu6J4SmVoTAz+L9jydp\nzxpHxnycSFX5bKJultbI0CblAgh/4CzFLn6DsMsJA4FrqYweJSxyO8Eybd3N\nSzwaf/IzzzEJIiT5MA8Jpa2ZFIisLaLKYiBgbkUORX4RGwwAHmJgd7F+45Yt\nj3oKJmxa2KY5PFNYlAcvuzV7HVf/GoxY7iUwDifxLZuwEZZt+vbtWFNGyMdw\nXAURMjvpiO1JJcWT9FDarvl1TV/lWGqC4z61TGiWwRkd3rTRvSn6Fke4PkcZ\nxMRT1IqxC8HkQznibgGvrJBk2rVQ1+7vX22Lhize4Ry9eh+mD7gwn5Pk+jP0\ntLNB\r\n=XxYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGszsEO/GFA+SjGtLZ2rM4z3iqzVfoLu0ZyitqMm/hPAIhAJcaZdJzukP+qARK8SMzUkkzh0IdkqGgrSkbC1UcfBwu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.1109a3d3.0_1614717309581_0.1948320722253427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b9cd8739.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-button":"0.21.0-canary.b9cd8739.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-6X6XZqssT1bwjfd7UJZLYZ64UedtYpCU9i3q2yBBzNbVxquimfclwBacjdsafVo56Q/sjBXcC9zHAPZZbudCag==","shasum":"81b94826a54b0c299ddf6dae8f0fe3e236e80afc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":109982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vvCRA9TVsSAnZWagAAxdoQAJPggphiBhWxw1flTYtV\nMDzA5bkLFhO2/eF1g3X80e9hhJCetGUeeq1X0avlWqHZvS1U3WmYjTv5MJRu\nX51mbK0VelOd5PLXy5trRFq3dtYgAjDNJ0DiDb3v6T7OeBtj3D0ydkJVHHRa\nc1OKADq60oBE85DwxjeVwRfgR5ulBg62sKdegJ68OGLFu54rriICO6gbk7Jg\nFp87QM/2kUnaHvjFIgtoCMDrnPyyHt5zfIqPCPkNc+dABtZ6EYFlVlRPLjtU\nk79NwcW3h7ByXT5mikZarUt1mTGmqcOuO3YrkJpa5vf3gMaddDNkSdTNJYgq\n0SJS+5uM0iwMTsvGh4pmEotrOj9FIlcZdaMUwIMHFYNfrtivGmAeV+onnUBx\n/wCsDGjQItV4s3x17cmadkpPt5qo7ZlYAz7/QcQ+bCj965fDjjVtvXff6oU3\nBgyYHp63GSYCAUmMWyGaCwJ56sW9DP0A6TTYenm3pY5v5qopx7CU8ftq0hDV\nPTHd+md5I9D3WVDunRxZb8FJmU08iufG0j6WMYQm0/eIsnbb8uvS16XN9vAJ\nzJEJ8kfksfVh8RUMcvzVGWbnzTKrb+CXJ2rX7auXVSBDxwDOSz6cgyn3wgg8\nIEDcy9s4Zr1nkPeKq43uhndCMu4xmxZkbWck76q65Lcxh/sj1CIxhy3Vb2nq\ncLZ1\r\n=DiT6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOvGo+BmgDuZvgiHU+kM9FzNTS+lqGUr/Td69WToUxcAIgfdAnFJwCt/sFDvGbpSa0UzmIHo7S1loQilZHv/SagfQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b9cd8739.0_1614793711354_0.7115542162677919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.71ee796a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.0b4a4b2eb.0","@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-button":"0.21.0-canary.71ee796a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-b7U7Gh0damicgm68dz9xQQsFZ4x1ra/qs/QIztCWwSw+WC6WTP+HrnEJP5cvlmqRUgv7PumEspl918ZFDRvZpQ==","shasum":"83c37691b8f100232d2fce5d6667cb078aa531d0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":109982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+17CRA9TVsSAnZWagAAUkcP/0xucA59g4XxAqYgmsSs\n6tOb1XtkG8j2N799+TAmVdAybxKz/LTL7xLwNWxtKKfQMY5gdrg/cCqfSGt0\n221/dZXxeDw9kR8cJi9WZFgeaCRrQdTH6wBG+MSVbNYXC8CsFzU23yLYDyMe\nFz+YSXWYKbUpNJ/ZsFd29K8/iU1pdlVcaA+yn96j8dCcxxfMTi18FrwIzeAW\nQx/PI84WLygcidH6STQX0RT9fwbgM1wXIRwjrqPiS3L9qJZIskkehFdFgC7M\ndoEvPU7i4JLvAthCtRmy8Sw01nO/rGb4uAdFL/LPxpI7yHx5F5B2XZRYc+JI\n/7+kPfEG0lksCxs3QByrpAgW7h/omFvYt8G46OKAZ2fEzCtoDrS7mPPS1pSg\nt0H26hGtAEMTMoFL0Ko9f7LCyO5Lf2cCxGZ3gXobw4A+LEN03mTRZsXqcH3i\nFFsRR5OLnmq37wBuGoBT7oddRQMbnRlfo9MRzenlh9K6AeZJ19kQ8ngDFNUa\nsQSDYu9vkwu6GHuyKIrzHzT3fVUNXUOpCXNKofUHlN2yKo059sI5Rk3430Cy\n31ZPifvay1xhzfwN8sUOG1jwezP7t/W0944HOYfsyJlwYJE7B81CtnufgMaQ\nWQegkaxDqmEgVQVfFmGNOOBb9aGxZuzK/Zep5rqbYzcwU1GzxDjthdfCVxoy\nsUFJ\r\n=tPAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqLAnKyIxJPSLYIaJdAg+FEKR2kpE64liT4saZ0Nn9sAiEA9WFh9vXz2zFdWcGqvxK/m8Gb/jv6277AWV49VEs5Fw0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.71ee796a.0_1614802298550_0.12480474413128273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2be191ed.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-button":"0.21.0-canary.2be191ed.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-IyukYN+1RS/BIMeshx68JuBBX5KFR1jqAQ8Il3M8dX8PBBRbRShUIScFcqdbVLa8pv49QP0PEQwBZcB15zObMw==","shasum":"74fd1822e015f26fe49bbb323623d7de5e24f863","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":113914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUHCRA9TVsSAnZWagAAqBYQAIZ/QXglFEyeOAXLP8Ug\njrRiNeYgC/W1CevkYWaSpEEYabKrnkN/ExaJJJnpnY425RM9ox+5BZodiV0K\nYu2SOmqonZOw72fOoUU3xtJRtFGoO6Q4dAYPXnJ99bZjJ0hs0dZ1Be+bPeKs\n6+rgm5g3f3VE9LMzBblfMcBCcaI2nf7HvUpR/9GfXllSLGblx2Tz3EqKkC9p\niRU1esTGzgLAegSa9nZpuLzFBrbfuYo4sT8MuMi28q/NcYsA5iBQg4b3rSEa\nul/dn1hks4FIUPkiRUJypoFX2OcCLBGVLEckGcXDfFAoXAgcKn6eg1AZhTdP\nvt3A295iSVxmdld4PEMgi71GfplcrWtNa1HnOgOm6LgoyY+mE+9rv7bbltfH\nBae8ZKo5QRRRB5wAawOBxoDKCPRcZjsbX8d6lqt0MfhDbjFvGi4t0N96LOtP\nR7PMwV6wWkKPpc00CZjb8mkTVpvO8Upkl4Tut69v0yZ6gKoIaVR2aTGfMoYU\nezuDsquqoqWYDV/uBnDVrMljYNZy6aF6yV6Ra5r/Iqf4KUpARi5I5BpoXrJC\nHmnCTHvVE8WTz8A2RYgTjFQsqhz5TP3YOwzsGvVhwbfo3ZhS4hlgqcw/T0u8\nUtTxYrNAST9tS768fzcnHu3kCyBkEQZ5sQs4Z1lM3mkTDE3xusPyhJ1nQMuP\nBQM9\r\n=J0oe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHUQC3Pr9dxIYVaXA0hwb1cQOPV/hnn3CS9Fs34/54NwIhAPvtrfjXHzcvEI+soA5obpEKqwMJS52nEwkDOzJGuFo7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2be191ed.0_1614808327304_0.8967968790541596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-button":"0.21.0-canary.6dc7b06f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GbG/ZaUvEZxLwN4aCWQMviK6ZytLwU77WTyDP47UNqpQ9RUMHTffpsEohbVTxK19kbJpA89sQd84Fv2rgMoMeQ==","shasum":"ac99fa726963a1da521c0ab4bb0ad6f2e30aac4a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":113914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnYCRA9TVsSAnZWagAA0h0QAJhggK/aDDMyYFAIA8DF\nbHZe0hxUVyZqB1ZpeCYjytbHcSaGXyKlSiypTzYXB14G1GuHEa3y+sF4voAN\nfVcQZ7pDVLBGTgTG1VvD226zLo7TsnoauhXyHoIllNgmuj55fG2hb49+zckL\nmOhUkpoJLmD+S5WduaHYF1MsshZVs2QMeOLHy0mwWm+BEcTJJ28PANscyOOx\nZoNc+rKE0DXMdZfQYima5Der2WJEV9SOOBemB0bU4QVvYMPaYl3/pHK/fPC+\nwhgvDethnKJl3YM1hf/l697dz8TAGvvgzRKVqDxFzTuJ5P/RBXtS1ww0FXFC\nr+xMszEe/drj6TpAtxTc+gIp9ifUbQhq9nH59QHiRcraTr3gvA0O20iNLU0D\njuNHcPSDInRTgPeKK8xjaDYMSbgbu15E/AYCikrHyrUIVPnX1w0OTbGBoQNf\njKY6E6El8wBZtqr8GqJuwYXlljDgMxU6WUenmeXOfblzrwWsO9Hy1CL2nhz7\nS4woosRBFnhXRDl3uv8ye1u/AUDGPP9AwsbQw7VEtnehazhP82T0bwlg6W1G\naHZq74UeABtoMeESaHVRMYbgaXkDteKTF3IgxspDJAK4es8hllEs1Tp/ofes\nbbmc/ReEYZPl1qoyI76HoLjVjGnYPAqb3SM4upCG/t+JVQ9VnNIxCM7nVgxa\nsDDf\r\n=3kox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEYsOj0YDBVDp9efGn7NzawfmP/r7nNmitiEAwqKcZUAiEAgVEPxdm/OOY6TLeSb3hdOlTkf5kHBdFb5jK5v1UGqkY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.6dc7b06f.0_1614903768533_0.1677123363152242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-button":"0.21.0-canary.24fe7ba6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qya+lWEsq+StdHJmfD8j+Pi0C2ite5uA8pp0HtLHnpLvU+/mynCaj3RIGGvwbcUjyLFliWiopNjxrfEFwLeJtA==","shasum":"d10b2c8034d492fa10b46d60e8f0ef46f7094f66","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":113914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmoGCRA9TVsSAnZWagAAY2cP/1jzThbeDW12YE+3jstu\nrP17Z0Tlt63GrL/E6/2RhACJrm0QPOO0EWpOSgeQBcPhlRWmoLMEDtJAxNih\n7LKQHrkPwpmmsmsjeYj7wmFfktinVFT4DuSsPbrqrHmN1PNqls/YXYV4iaBM\nOJ+TZOQlogdRkC9gkeb5bMIy5JkVmxrWD7Yy0xez7bmm5vpK9GRI407AAa+f\nNETiLBRDI3f1jG5oq5uRJAgrxB+COL+6AO8CaGb/uifjL1PozcIVniMD9/ym\nmbpe0BoSJEIY1KVKV5Z9aTRVLXMBQQoSm6PfJjG86uSxL2+2t2NXQ+otMqRO\nVao/P/BsuLhh1vPuLJ1ioVpRdm8H9RbOt8PJf1vDt0SbfUxmVZUCpEz2kqBE\njcg4cV2Bas17SA1E9soQpaeRb7I6Y+PKKrabnUvQ+xlPiWKk5RmcFROeUzvn\nODyL2orMOOCRQghy33EPPB4HCPXVb+raLebSCzr8errkv7ZzPOSj6XJYwcz+\nzlGe6rcHvvVQVIeRWzKQBgq/qcUpWVMbe24Lo7K4+0NyslR21kuEijJu7Eds\nvSH/PHQ5lxiYzSmzLfZcSN11OTHxbCrfW4Nuoe7dLYEqJXSwXh4bWc3DlohW\npKSCc9/g/i4epunv/P8n6KnTCLrgNHNoetPu3ESCPk1eBpZlaiWuc4vlCi15\nHELk\r\n=Zo/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVQIq6wIGLKS3Q6I91XQFGqD+i6jh6XvEV5bF+z1/6xAiAMlhL6KpzWWw5qZWAgNrHaZOjXk10IWNoVL6pfqiJ0xQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.24fe7ba6.0_1614965254509_0.33172989462758506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.12c477d1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-button":"0.21.0-canary.12c477d1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-J6lJDCC+Ihz4/AQnwMlc/c/37LhDnUnikW43QL5nwbqDpY/YmuIsLtEBDLvkicv/HgMB0qCK8Q6HMrac0z+Y6g==","shasum":"73d54dc3b08b64657be59ce8bdec33cef12a2113","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":113896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqP7CRA9TVsSAnZWagAAMDcQAIP8HxP2HIXvcDTfwMpZ\n31rxrIIvQU4j+GlI15NkzRuADqcbsc2NmMbgg8sauiqEf/sU3x+SnPOx5cHI\nsSOa2AvsDZ04m8YZIQIDY7WU9ODhbJIWozm1sQj8X4a0yx7I1Cn2zTNNf+k3\nmY7WfMfhL2aeuSscpgtYgb5jNehyVKD35irVObUnUiJNMklxnvE+ZUTbBoLN\npw0mIs9fnJRKWy8gPIMd3dsw+SOiypd3lYF0WN7l7aQFJHihMD8bpwpHfxtm\nHax4K1RfwXpjxHaA43VNiAG5Haj9O4my+hXPGvEt10oJX2AiARk6vazeAPry\n9bHKdoMYjdTwI3F6qonfsRc/RFb8cGoqV1DZHddhdtChRf6AuNoW0mV/n3X0\nTHf5Hhm9RWwVulxKtja5809hzNXDONkRK2YDWMwZC/IxNlmKNqJ6HpdSv40e\nwxrC+pRylA/kc2cruJy6BXspuhB8kEolBWfhmEnWNYPWzyqk96IEKznm4R8T\nFYExyunj2oBpRJwtC/KZUyFId+N3AJDzeCFpkHlqzxXFBkthg5IBu5beA29F\nTYhpEhCm0Fw8+G/F6qFKG7j74GIr3+lcPnxEWpNCp417sy7yJCcWvJRo0iKF\np8BXtq4DwvwaC+2HgOD3ExwEP/ZLbFED2YBGgN2mibISJhnQ2glfUysoGep6\n/7kh\r\n=5MXa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHX3/2xMvLRQdFbvgiloNBLykYw63kg9jpGy1BIABfTgAiEA1WOJYxtlyEzgeiwfj8h6zPKUfDZKH7cC/MuOSptJv4k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.12c477d1.0_1615242235335_0.534072063820693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4c38f801.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-button":"0.21.0-canary.4c38f801.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lB2Ug80TlDcvwQS3pDvxQlsSxJSjpR+7UIrpuFez9NmZBJ7tqINEUqFTvUsM1F1Snm25dqYuycUABwmSBczyWQ==","shasum":"0ade38a0ac618745a30e52ff7fda9a1f03b696b9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":113883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJXCRA9TVsSAnZWagAAKYMP/jp+/wHtKwRV0m6zlgWo\nbIqckIde2yxFhUmkLBUc6W4zsD8UHL69JJ5xQe5bIGS2rSasCNQCTfyRZwyM\nGemhDigFdazjOs2NV1dcnyTG+AGmu+h4UMno6cXnT0GHhg+t8wiyS8PyNJvs\nAIh1A9aWWTubrGKpMEQnVO5MWnC8BHPDEXVO71ZA+k26WlWSPJdKX2W/uxd5\n/EwDmnMy1Gk2kNZNxdJf7tHriaoCD5zGcjNdsdhmhi/4kuIX9AEhXR7x3KBY\neB3VHGEz6+dHjoRq5TEy48W5yit9LhsyCKdbi22NWArdfPEuvXjO03FtEw2s\nCphPRQyMBGrDKDhDbkhC63hDEC5A8yynntWS2ThUyGJxRvbsHF/DR7Pq9mCs\n26omYOq4sIqE7o2ThGjCPIt8mQwT06PGkEQ3x+B0C3FFuC+iwncN5RWdspdi\noV6zpiRKYsYScWKQyo1EBd7Qn8XHaFq1WzZYqe5LFU7uJq3o7AMcwGfHowvX\nLyNkq0Le/1xbCyxe4v2MonMHgHxMLd1FsuOl8mxwr+TDKYdqGtEau4NXD+2r\nwpdeUj5jgL2MP5LdZNMn79OGCmvpRL3OYq+GUBpOYdbHE8ivsS1vzZcf3q0j\nb89wTs+LR6+nGFGt9xcbI8xtrLm2GGO4MyxT2J+xmPuA1n7am4Xi2oq1YngV\n3BeB\r\n=GTS7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJJtl5GttQrlz9Z2I+yk1lYfnUudbapA7AuKXiHpGT7AiA++NdPWUtBlxhZPIUjID08nC+Eit/oal1n0W+WeL2NXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4c38f801.0_1615245911437_0.5060288543877269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.8795b83f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c7d98fcde.0","@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-button":"0.21.0-canary.8795b83f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3YZEbeiRoB+dIojV0vRJ0YulUS651P/ShQ3W27T4mWsHBRWwv9sO99Mw0aHt3F0tuCvDBVTSEzqTRCalxo+9uw==","shasum":"eb9993d81f2d6eed0ab18001f48cc4d7faa87686","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":114454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74tCRA9TVsSAnZWagAAvkwP/jPF5EU+vBD4XrIRFFbm\njLsivvaO5yZkRkXvD2rQHpEo6jI8g56G3NIxxD/8bPS4nBRTgYMEMEPAaXMy\nKt6fb1WMA0KFFAE1Cd8PPRHILMpSSJxRjQEIC92TDl/4dVhGHIISyEi1H/cN\n2Lalvl9Zc9z7PoDL3lrfVd/PkKnfTHWoPTSZlwcrJQRvWKNRBo+++lb/0pBq\nRWTL/5wAqSlyq2so0jHgVD7y3M+qQp02f/HfKxYUwbLaU33hLNgeO+2gtKV7\nZzYTIXmHmk2h3WncybsA30lxZ7WNMyQnSwzf3IYM0QTlJfWPtv87PXE04miX\n34te+0hm7xe/xlbRpnJs2FwflYv5GH9W1QcgqgAU8Rf1C+9UwvjIuJbRXJJB\nKmSDBmD0MzDt3tVxf+1kBPsCn9gRGzIGJtZEi2hiADMkoBv63hkK93hs/02m\nPxN3I7PTTHdLSUYbrtDtCz2Chhjcj6E86GpwjDeRevmp3jM7mR9E4PajIQtF\ncWhvburF3/0QmeVjv82IrQExoVSiB4cifkuOfM+8iVUWXvqbb7Vu6kFj+5wo\nMhu+tiTAoSqKK+dKGvJoq1YXMxJdqGwmb21TbA664pkO8nBAViW90+/oPfCr\nIXL/pw+lLyd1UQZiFBQWmkfSl5R7uoyIgZ8OjBGKnxPMNCsgpjXjYzujlc2Z\n+vZc\r\n=FSK4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqkHk7xWilW9LD+cGyaaEHxrWEpGJprLXYniFEQW357AiEAos0xeU9PAW9R7U1zxBXqe5UdL+DL09+YPouooxnmYsA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.8795b83f.0_1615314476574_0.7724452732221971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.12b84cb7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.7522dcaca.0","@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-button":"0.21.0-canary.12b84cb7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/feature-targeting":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5u9epsgd3sT3kIcW+7IRfNqXh1KDpnh0YBHEONPayR4+NSIVSN7Y7/MjMHWifNab52wAasNJqsbJhKeybm1isA==","shasum":"f0cf32b660ec721a01632c95311efb314e4338b1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":114676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBXDCRA9TVsSAnZWagAAV3MP+wbnMi0eX2NGk6GtJlaE\nr/iwx6xSdiZxfN5zGgEJB3ZbPRU+SWfJk+W+foqhc2tZJBFoiGhFaP07N/92\nIXd4bR8SToh424UICh1BFejxgq3zP/ROS09e5g1QYjcv+Le2CncQAtTkV0yz\nvTPB1bql4518Rg6sh+1c+gFxfKERX/xn81cRgRlozaN6Vs2XKpbonPocPjKF\nsQ58JnMQ1ubEJbu+gRZqbr7p1IjycpxFcpWkI+mVWsssVHqRw0ldzJJWDoRI\npisQSESOir0pHsJC4aKUDPA3QGwQyTc/MpEbLHTXUEO69bamUCbWeYVsS4A1\n7hzJse9QpZeEQ7Tj0XVSceDSTy5xt+sSQNl/Bc8xzqlUl2KrNhPOLIT6u1vd\nTr7Djih75J32YuFG3f4wg3WtSBG47PmRBNixmTqtYfgWCFW5Lcti4d7C3xdO\nsNg0iZhQnfs0AllxGNfvXAjJdt0Ke7RV8BI+1HfTfyAt2C2dS5/lfaEQji2F\nKk1aJ2e0rIBzZuayGNztEb/YXfZRI1wou+BpSlzMUMWZlwW3fbH2hg95p9rs\n4tPNkWT8Vsd+h9rEg7hQ/zKc1392VyUXyXZZeGqgglL10NZIxplG/QoPwQ2T\nAZLLEGE8st+3WmCiAbzu9ZUz2vmwGra9jbE55mLmphgj9I5rMbNwTav2XutZ\n5MF+\r\n=37xp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCwWOmGA5DTdFzNb6061CMGC93IguwANpkqr/M9fTn4wIhAOvhXdkzFJ4Ibjg0W/4B3t8bhLhrXLbvg4fzZ294U454"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.12b84cb7.0_1615336899212_0.5407578082336926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.6ac6784b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.7522dcaca.0","@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-button":"0.21.0-canary.6ac6784b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/feature-targeting":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-54O8t8HBqdzv8E2wRea67O2UR/KHJU1/+6JsLLQmF7Qwzpz6BHp3iczx4/1xCBe9ivrDFKMpnsLidpBrhVWxjw==","shasum":"d60e9c5d4983e892f9359be6c0267f20cfc4bc78","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":114676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgtCRA9TVsSAnZWagAArp4QAJwiZGfeTAy7DJSKase+\nLng1k7JcFehcId1IdoqPVjWbPXS97xIRZqnNwIqYmB9gMwLDQLyjOGF7uldU\n/YuNazyFjGyTQzL1bLFfgrysQyXJzRkFYnYrAC1qgCjyyf4vMK0nxxW8n/V3\nb3Ahe4s9gjwOML3G9FixAYP+rFkmvPXbfO7qp+0xrfT6Q1/cI7tGtkWMr9QL\nEh6gNvRFTgv2xHq29SjrZ6jH7KuwMCiX+Xgr+2la+WVtfNGWkVQBBbN3V9ta\nR7pNwhjcQHskjLHyWD2lMX6KgBE0h6C3zPhN/wFJcmo20dwhhOxBUslde98R\nVbpoS8G6qAYCSgVA4jrCipBk2k7aLOAQhtPAq5L/bD+rcYiw3G0fKV3NPTsl\nwjdLl8Qry7L7EtPkaqLoDYPswqf9MQHNxgOwje5Wc2C3NoWYAHipkNAEb9Zm\nvCmJxxpheOEyhX54EISkOMEaIDzO4s8HtZgqMRdjqFgsQoPfk0+N7TMix5IV\nGx6dhcTqfQByJ9+aSFNm5Fx9UBFfC/ZsYb8Ym79rgaiBVFE0P1Pv9ifhhLLy\ntBGfN9aNynJmqMskUwph77VYvVXXlGYfsKhSPUXFX/Eamgqi7VqudBgSBMsC\nPuPcRTxeeUpEQI4uLJqPpIE2aLoU7QwOUsFdoh5gU0z4DSK8810bFPZHTqRg\nv9UM\r\n=hJUc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkf6SYtaYkF6YfEBDrDDo4D8efGzhoJbheosdrm5/cxQIhAPWOlU5Qm0v1AImKj2sJ+RhtdULIam4lIODMG+TtWywN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.6ac6784b.0_1615337516773_0.6396451116902782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b6d92934.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-button":"0.21.0-canary.b6d92934.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JosoR3tkfAL93lu22hplsqMN0cAx6GE7CLXjNrP57gcc+CfoGFezz+n/O/biuyGqkDDpIC9tTsoAsI9E1dqHRg==","shasum":"7865be28626587342bd52b12fe02a43048b7e311","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUG0CRA9TVsSAnZWagAA8FgP/jicxi5UwnM37HlzCeyR\n5Cqu5NsVY5Qo+IeihUgP5BMSGXO6NS3NUCLvIDxqrmY9Zdt3Sa067lfODJnJ\nIZ4P9+hmvfu+DPNH8cYrkVGuUiOX7UUjQ9eg/gdnRdOu3+xw16n+x1DSS/2F\njuvyzLEJcm9A3r/TZnDqb+QPt9h7/h98ScIJWmA0y7gWZVKyxfliz942IZQC\nl7AzrLev29wc2M1P20Oj0yGr1V7uVRdn8XhtgVl2qPBW8QtGG7x+psiTe/b1\n9fNNinF8Hju+OgwBLo39euyic0+GtnSyJXIgPGZZSpODHBu7Y7L8E5Xnv787\nMe4H78Q09tG6GdxCkr5EKLt5cW+Lm5oNxz3CGYia+PSVCWuNYk8g1mi68FVC\n72q3BHbYB/HZaDFlZcPHSkeGxmGHB2bpmlSQrOfGopSwNvqB97W0DjVbaEfv\nh1r2ndq2wBPCsM1lp4BtY87cTyGWbXyyOfrkisgDG42T4nXrg+O25MSmVY0d\n5qj9znzfS9PXokxrM/8Z/LvjzdfwKpw9Z5zt98JLv8VFitJ4O7ba9m1LFRnO\nHzGXxwAgnh7SHJ39OHatcw8QRkj0McUlvzJhJ+7t921AVUk0UPKazzXQQsYu\n6PipRQTFUynYVpIF9+uM+W1Dz+sdwPcdqPXJj78cKzB7gpG5hNchp8pg3Wmm\nbnlM\r\n=EREl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClcYnh8ZAMeXcWf95Qy+iUfa14aMHRZJvcj0bdgPzMiwIhAMwccUouB3MOCWE9SCvMkd9HCxGlsfFY6jnDPUBha7Zd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b6d92934.0_1615413683768_0.7792895234710191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.99a55b9e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-button":"0.21.0-canary.99a55b9e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PV2Osfs1NkHsIsEsgJAbRvPjy+2w8H9aI89xstYUOdmtnnuCkrAORHjJRbWcrAslAnLBjULocVLpY/Nf/wg8jw==","shasum":"bd959577fac0c557627526e0eb7b182852630cb5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2bCRA9TVsSAnZWagAAM6sP/1rr8IXwYkc+YVDQ72aJ\nz5PqJuO62m5TSPrZo8h3DmGxNjaTnFB0uY96Wjr5OukicgVs/0epir7azYqO\n7FRtcSiqKCJj1dXrYpFTzFEQor2y228GlA2VwnNpdTvP0WE7LKD+fJ4vyDfp\nTzrOpoFHtpFqSYHPHdaubJHNryWlNMMtvEuNLb7t32RwFpIyVmRR9or6q1ld\ncUGwJRknopB2kr8Dks+JutqHU6mj857+SCXKMUfLxA7k8j9CQEX4cLy3gJMf\nUhqzDzK41Ow5rz3DlQMKDql1tyV8Td6/ZvLJJttdOUNsya4nIloVbp23XowJ\nU+lz419MY4RxF/gghuN/sndnh1d35DzsHIl2FHodtWi5TGEiSLYTgC2prm2x\nv8vYNhyN0+YvbpstKP9mRSwaNPAPQMc7XuQ4YZn7l7cHpOsVGAICPEvT5eiX\nplzsCRmC9eSHP4UliqbDlkhN2tRp/RwQpCx+9/foiKmJiSgXmZI0b1Sotgj+\nq/35deiA2TKj83+z4Atr78IDWB64mga87HKNig+ZQ6OZ8NOnyutAXriwvSpQ\nwjPpQMatflYnYWMHRWeM7zkc1cqD0pY+iCDpSdmxpIBmcKUT/lorelsv0bjt\n0+Kms6+mcqKEJ8M3dERZUaNESl3nPDx7SVSuV4H9oqYWk6Qr/rQ1meCB0l2n\n/Dw+\r\n=vRbu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpA2a76VTtaLn1kmL1HdUCthsNssVJci/DIjWWfwnLuAiA8PmL3xnWZnb5Dt/kEVVjQ1vgka0zeNIcStbMS93Rhbg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.99a55b9e.0_1615416731086_0.14551375273156175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.bb14efb7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-button":"0.21.0-canary.bb14efb7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cM73/0o42FDDvJ+yLdmFWx1TRGwE4yZ1MLiD04x1obYpENb303lraLHjFscDV20aLmfJMbq3jbSeAVRAWcPyUw==","shasum":"ff7876deb47ee0bb1ae8d5521d0d161e6c4d0831","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhDCRA9TVsSAnZWagAA62AP/RvWfmYGnZ4wJKOsz/oV\n/lTfd8nhEeA7heWvQwWWYLDD4q2dHNW+j56qQvNYMi2NzwZTOm2sL4hhRoZb\nqXUZSHjyUvpdrsYBRo0YJhbBNi0e2g65Ix2G147U2W9qDdPbCQOKG+FQvxBA\nlem4nG/VAEuZB7i4oS9GYFi11TIKf6XxT9muVnyJge68eTGLXk+ng/kFEnE+\n6zgjDDeRDQl5NDw9skmnxkxvn5o8YBdgCgjHG5ViAtbwskYEtZT99TMDuCf2\nN9AAYsEUKkfK6VivbbC6usdPm+d0aVpfgoJeSdKDW5aTWWaTnmEMdGT+Sa+s\nwq8yurG9rl5Lg9yioqgBPUkBDXu+sMKUjZl0wYcHa3xs4Sw31CuwJuBGR6xP\n8095mqIkkLTMYCtRhD//kE0byj4LSPJEcWchB5JN5P29aPA5pThxug2SEE+p\nry1raoVpFtnd3uMHkvZ4dUt3uxNGovIYqw/jp274Xh41zw7RtFlfC0wJtnwU\nmHmmani/PcgRj8f+3pe3bi56vjR16WL3nUBy3CF+LJVCqTwwdLXFqaIf9Zvz\nyRoxqtgrT60OHqu/mZOb0G1Ju2hfT4u85tbFy373J8H1uWk07FC6uT2OwplI\nLs6+XwtNgoKq/itX79TgX3i97ByRDOP2lXdIcMbiD3+zqTnZSodMV3j2bt3Y\ndOQJ\r\n=wT5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/dPUYdfk4XoDUQqQLcpl1qNg47/wChGUPweGwjOS81AiAJuqDR6YKf2M4PpuHKX+GtHZnpVoRqg1aCaimg2QRj/g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.bb14efb7.0_1615419459542_0.07434157371237493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-button":"0.21.0-canary.9ecf3bdd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Sl+6a8QpLlWzw+6D/KjuAgv6nOvcKA/R20d9frIoMXgRXhmzp2QA6GfXhME4sXtff0Th7uNV/RN0NiSYs1Jkog==","shasum":"7a65f2b85ef99c9b24d2271ff65ac3ff6679fe6d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMtCRA9TVsSAnZWagAAqKsP/jpUowjhR35+NLfVmE8g\n33tfgSLjKdkJ545IjhieWuYMMwqtLD7ZuakCc7DI/wOEIF+CwTMiISt03BY1\nplxxDFG39vP5SWQ3RmqyofU65Zo5PRqIBFRIbx3d243XHyYSwKrtYgbKTi7u\n+pXyMXTMVuG7c+5hyIXSD8xddGzDSV85zNyYNSrPdLSzcfJu48x/k8kXAda5\n7AjmqOnwyeyVsw288qSg2d5vs4eB+8sKnIgJKjqs/bQW7jncMid9AspbZk05\n6gK/hicAiarlTayXeF+mbytStLhI4KW5/SzdEvFQsG6kL/JeRDMuIMR/mIdI\nQV6YQYaJxS7InK2n/c6te55FP/87h1kiQjoGA5h4scCSJQPYeCLYE0hdzYjo\n1uBTixrzi7zPHsa4Ywxzu7eNTE2kQ3VXfvE1tq7DL0mtwRk0AzDMOh+2ooQw\nlwjRi5WfTJyGCFGJWz7mU/UF8MfxK/K89NwgU5SzgS/yLgoVYKA97fnguvtG\nmhQZaa6FHqKMR9ga+1fsu4b7wlXVA4XtdshVM27RJ3prKQfpRwMSrn1Y/7df\nw+l9igrfH6TnLamdKAqDCwnOuhJ2YNb0a3srtdv6XjUiFB0oh+fUx1VTKAcX\n6nflWEhmERcilpKFCB2bnBThXrNSVOYzD82I5NQwgBVrf9gJYFGmJUBRzhSP\nGlJU\r\n=5WIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1BTR4urRqN9UJNeKZT0iMW+jMeVPoBLws5D5YOSucwAiB0lLv6vLbLIK5SpVtajBvRHB2lmYgxfiSQ08d1gbSJDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.9ecf3bdd.0_1615422252826_0.5508114272227194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-button":"0.21.0-canary.7c0e02fd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xyMtnEpqy8JkSv2BSd9LhP5Rpdt2FEzHbxbt6gAgNqJpNh7o+vfDlOfZ5CML/Rj3xu08y05ST1X5fMnVtEu0dg==","shasum":"f8266bd83e55c919eab0d3aa9d81fab97e740a35","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXadCRA9TVsSAnZWagAAf9AP/1RdvI8+BVQcevBlO8Rp\nWydxmyPsY6rsUVT2HncyTqJR9F0ytcn9DFC6FWdlTjWZjvIAayL8MpE/YWjA\nuXJj3FllTMbIca7UIEEoxRHMkY1cMPuuhatRGoMfVX8DmC1olt6hlgJk9wD0\nziZdPzPF83SJwW81tpfgggSP7zPjbTF0duZIe51rYifHsVGIoo+UgOFhhXKx\nB1iENdVn3SHFh+NmN7gTb69dCt9skWyZVMYgCnbx0sRh6zrAtC2uLD8qKHpZ\nDF0p4uySQUQY1faW4bFUr7apGO8CvieqfRfBBxab+ImbIMMYaICn0f8fkAa2\njYTOtlX8V+FsjztOtE7H/G1Gy1HjGW9iHOI5BPKR50H2jLTNMLBHaJTnjutk\n5UohXLh5m9/K1oDD2XlRbv9HiDxdqDcC7dma921St/On5Q8S+AIhlz1UUwk1\nWJfS/cdXOPH6sFulgZof3Wdu4I2OFNOorCfPj+gjlwoeRNg7yJJg0xLzINhJ\nV7Ld4w9gONebMypV7yBBMZqo1WXClHtgOmsVJas09cW4kP7Mn0sA24Gp7KNk\nK7GE+SZt2eyNmW11VzinjdbZzviTwqfazyW8qWGY/3mRrSqy3AgjmguppTI3\nITYGGT61nn12mx72ivUTAniklS1Zn+QfS7STrt5K/dvpUvqAbKxdT4q+G4zx\nieNF\r\n=OIwu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQQFgber+bLV5s6naZcGNjlTBhVgd9tS4fNdLJXrtzUgIgMK8ytizJyYjPrt1SJ0JZaupTEghpSIK8f8dz5JK/m9E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.7c0e02fd.0_1615427229261_0.48041626251510094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-button":"0.21.0-canary.2d6d59cc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Sx6i+yaBRouEqV99Mxwz4gj9zROCtwK3S5TKVTlpNeuhbGpH5EqwW5v75IJxSMKjN6Cd4uXVwUi8JC7VWIujhQ==","shasum":"2ac94e1c4074933feda7b6a4a3ac83f8fafbc81e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGhCRA9TVsSAnZWagAAtWgQAIOHrEmpQ8V5Y/ZpNdYN\niM0bpUrJ3oc86aJIvbGotTzXOfHWsUvbNDCR2Sb69u5vbBHXo6ghjD45PVxF\nOITOpYoNYekO+akynxRTl/THKX3iCeE9hlQkqod9o3H0Pu3WqWJBGF9QipWW\n8Hj4rCYUpXPdFtyBE84zs6hTMn8WGo2qmGLdaNJ984fxHLWt5T43kkGD6209\niShxUtPwDm/E5HRhgJFcRu75hPq48m+JT3JtOM7w1eA3GQnJBwoCT6qIam60\nGUkPkWeBrzq+BQ3n19Sb02C2v5Fqk/ZMj4POdY2lqr+TiHL9uJnLr7LmfSjK\nCx2hwLlRI3rCTmNnAVdkxyACs8syAifIaEOXbidyLFJ5StDs13xz/ZB73Cf6\nfgNZvMNOiZLUke2q7tiVX0jrn0UHPbQkbmE9bNMuV/WMNxIlIl6fdf/eB03r\noz3VTGTsE4A7duNy5BnmQ2yMDQc4PIFjQRIJXl5DklG7KDHF5YF30759Icu/\nI8Lut6uGi3XaN4QPTWo4pzlzotEH8eJZy3epmYoCTk4r1kS4NkKd+Txl7CiE\nbKct8lnsnwcx9E4aqoNpOO/LUGK5wW7IItLRkhS0pIWW3+P8Rwlzamh5Ttfu\noApZL8U9xqM23kTMjQ3zoFoKyQUpJBSXH2bdAugt4N5DF3PfRfLpUeUm2s54\nTo+4\r\n=s07+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFf10aPxLWpSWNgZwgwCrYQQPYaO0IRm5iODSIRtWhB5AiEAveLqgF9XsCjMCLPl8CSK/lwQ9IJ219Jj0P2VKU8DrGg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2d6d59cc.0_1615487392488_0.35955911199949075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0138863c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-button":"0.21.0-canary.0138863c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-md7FJGEZrjFBjsaq+3B/ovPEvDBIqUumW9W4aRPHrWIOQh91ZCrG9zerTIogk4VGgC+xr348EP71gRn52VlCRg==","shasum":"a0f7b8947aa29abc5f2ae445c1a99c3f0086790d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNdCRA9TVsSAnZWagAA2QQP/ikNsVUWdSsCt3K0K2pZ\nhBTTXty1p3jAeZ0fAIU3ir7H7sZKNCkw4QXZ2WitH53KiZ2BsJj1B9A3LJPn\nDi37WDar4De0SUBZoEKsrBN8f6FTBwOb4jW0Mwc72Y/683Dy4kcI7fLtG79/\nNbI8pnsUyvBW6vHRSuoZ9XRcVxc/QyFTkHVyx2xjkCvjz30li4O4FP4aAv2f\nrnmiwErT8OBW/MWRzFBQHEx+lWsSHea/3UgJbd49sjjIkxtXDFPCCE5ov1RZ\nrVPqG7BFFGSaL+98/BrtVL42It4DzwZjRLGIqSV6wQDYPggJlrFAoLen3TPz\nmIZvR2wQMEeDxgqbWvfif0/X5QI9zr+8VB6uDAvwAEHJFYtyV21w7lfAhDmZ\nm079cq3k48BW58qA4hwxAlbunFs5o7kt+FjqOBuAo/rmWeYkdXjrU+KvzqqY\n5rajUqeAXPQBrg0qn9pPElLDqJQR8uznNWD2DxiTPdhO5K2iES0P9cLnUcfD\nkmeBlF4ZCzPzRQLgguygAxVJyD6o4h+F390jFR4E4rgMSsnyFcDNg8WPpVbH\nETK25aCK197kWIhhXDgmQRpi/PqPNG2SCX9vun44d+KaHw+AjvBpiAAvrGF+\n7T4HX65bWHnHjb9JiSDSkV7P3oF3ysz8ow2A86CQsqBQKV7iHB8rTMMGWjbF\n/4uL\r\n=5dFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENAMLA+RgUZ20Z6DAiy6aQJbOWGC808cVfRsaPegiAFAiEAlIW7BNR4s7IeXsukvSajil5RFQBvVmAAay0zFEvf9Rw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0138863c.0_1615487837322_0.24213519252412974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.926f5bad.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.59010b6dc.0","@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-button":"0.21.0-canary.926f5bad.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5tLdGMpF8zYV2gI2olIhCvjlnojKDZbEKwczMUalTyM+TZ5NuHeGd/s38dGT0PqIyjm7UxM/BmJmqDeSkFiuvQ==","shasum":"41de4ef3e4c91f61f799fb5c7e0bd21c8ef580a8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":115102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSntACRA9TVsSAnZWagAAEr4P/26mx+pO6emjgB73bvS+\nBYcGPob7fvbjvjx+wFbV0zoH9IVWCUmK18CwtgJPDTd9RsJSVwQwYVHHbgK4\nrMp0aM+gA+HTs8kvYzhDA9p2OsP02jyo/eLDA1SbaRgmtRQBASjlUhO53UhM\nC1ekr8nSVG7UaGGinCvnaCPqP2UxobPRCw/gnuGsAM8/0UlIuM7poQ5LSwZV\njmBtm/5EYf8QZPqNnG1VX3dT7QIvRQJRjMF1uSbLBX4wnehTiEZwX00xFv3c\nooiuLF3sJ4Q7eylFy4GuV3YVAWFvOFx9WgzvFo2IT0l43ZlKK1cumpeTG5Qn\nG9Gv0A1YqiVGZ2AHjkM/IVR9Non++8Ul7/8WaloAKxQ6fCFjH3YqqZPXjjgp\nEfwFCHnZEbnzqys3D+7MLwNIj5xvpWOVLPRKT8FvaXOb8jcAMf+U7aLJJ+Jt\n1eYYCmZ0IiDyn4Fz+Lqf9sITA2dIBymtNk3FO6phAtNPMfsY3eZqnnfzW+FX\n1TyRZrbORLCE77aN0FKVrazFIbyB65lhuavTSMrkmGijgfWCsqX8+HL7CcKk\nN1rYHqYBSv+QfbAGeQJoeItOw1e4ez/UONfOoFfgMCt4zeaT/Qbmq/2lIgON\nGzDMnLccsMoBZ44gq9jfYylBw5KSsry+mdCouYLRIoaEDxtMAtGMKcTWyyvf\nsfMY\r\n=C7mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrKNPzxYqvbuPQlabV/v+cOT07tQDyI6EYTiIuoP5t8AiEAxUx05g5V7zOx46uvhUZ0M4cJ8QGzEbowPrklr0uzqq8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.926f5bad.0_1615493952230_0.28074376346589824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.520290a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.1e0653477.0","@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-button":"0.21.0-canary.520290a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OoiwB79jbg1cBnPcD9+HoSzgAgKZ1o3Vzm/ow0hzPeA4zpwsO69PFO01fnFQrZ3EmCL3sbOnmQvmTWxFQERK7g==","shasum":"0dc1aefed55fe2ca9c502beee63b04dd3d2feee1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmLCRA9TVsSAnZWagAAsw8P/i9ebAD1BkTaT/T7ZW3i\nmGSGt7J92QbcLNe1jpeShAD75lcoTlJndFvj44QKG47nfB3e3Soohed8l0Dj\nVuRQ9f+pNtSkjE6NUl6Vj4fZzwk5hh+yhpBiIllszx76018DtGuVdZYnxsej\nPBk6YPstjTBSGQbh+l05LfTBw2ARrYdkLxQttWrZYp1tZ/TTcVPZJ6d1xHpR\nSLlSHYTngEaiZEEw2niEbc1x1skahKommJC8qMFUMQN+pLIYAUE+v2B5R2RF\nfDSmTIYcwgPM9nucK5U/cydCxlmY5qQ2eeSbPSfKNSYfrY980+fNuRQdRvGO\nuT3gSB3P7FySYhaaYrM0u+g9wLMJC+otasaMzTF+nPLXazLYTUqxbR2NHKfJ\nMDiVcmBOAuY79/YnXXIOKzUyDeLYl4OU5XXD68q2am7ubG9UBJhWIlTzMc82\nl/HTXGRCPXdhJIkr78euPmBGGGImwCHPLGgW5Pgn55WWuopqbe+8I9tpPBZh\ngb0IrL8w9ApAYfTxFRs6DukdO3UuKG7CLPmDw7DM/FMwbFF59y+oV8pWIVB+\nX5UEjyJKtYzZMMKpS3gxcoYmflMDAyQ6AHk9xJIlOIRNITXex9if5AFdk27s\nfLlpDnFeWS4KKWCsFQZJzl8XOMqkGk/jVbS/1Q27F+DD5zE1Pp0SFrmvR24y\nJTZ0\r\n=F1qP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkPSzhpoy0HW1/Zx+u9RqGrGIzVv9e+VIZQXhxirF97QIgVNuBTiF9r51uB3gu74241ZVC60x/2WCxzaZkWomVjsk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.520290a9.0_1615501706827_0.9009112038679583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.9ec431d1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.1e0653477.0","@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-button":"0.21.0-canary.9ec431d1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TjbOIAWOzkJIxj7tbSEyvGY0B8Ymq/0IeUJ1SlpSYCXg74tol0+Qiuwocu0/2GD8lQ2pk/gUAtheheHAXrrOAw==","shasum":"b3fe4be32728b122a70feeb7306bbf60e97c9a9e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqWCRA9TVsSAnZWagAAAkoP/1xykVAVf0KRzY/zxxOY\ngc5wOUZqH3nFUESai46MLHtl7tlMBFNbEUGBZGDNC5gj7BALuaUQEtIrMI6v\nAjcbzDq4ltYoXur/QxGKQCiqr7tl6QTB57Jwe8Q71s7tMu/cwDsj9ajZMpz2\nnqsJZhgUDLkNSkZi0/+hOLKE2RkRY4PUMsKDyPtWomaVVVKqYrZzNbmAcxLT\nWIIjVoY75ZWhofrLnDNsn/7vEr7XV0EIuuXilk5XnDEC1iIylw5GYPJMq+EN\nfSuOSPeDOPFe5wubY6TopquUivXwIrv4LWwzYOM1SaMOHLe/uUH0nvjbCvVm\nrL/ocAG+k/ZtdE4uPBtQ4FfMF8fPIjfNSrVrUoec4FJThrsh2S1O/kDHa5kE\nq6KuCC0tTyRiiISfsB9sf+tuRp267gRp9wmPeYWqE7433LRBV/G/Qu/WxKu2\nqYEASPlyURfAJMhFM7rNPTlvXLtavhRx5t/Ddkz2Luvivj1eSVk4tRDjaso5\noxBAZX8jCI2Srg4PVqeaN1B9avxCUg7u64MAAk/7tyoXkEcZWEF0uHe8Di8X\nux/GhVpSoBRSM7YUoU+7a7G/7xt3iM6kunlPyRd4l+S0ibJAb3FMgUkb7+e+\nWjCWcA2XAQyZ6qXJmXMUXMcfq3xVepQUD6uGqDQ42sbcSnljA/7KBdHQg8Qi\n2DJl\r\n=UAiQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsoyH6Pcn0uXL8ivJe2KihdxxvJzgXGejHwJ++zuRtfgIgBVsVE33cj3BitdMmei7K+2ICMUjS8WVj6HHXvoCsK8A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.9ec431d1.0_1615501973788_0.2635832478726605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4246c082.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.1e0653477.0","@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-button":"0.21.0-canary.4246c082.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CXxpkz0uv7DgW8XsgG/+GnKF1yp4ZzKK+pD/A79rQX+HwjMZAADs+6lQVS2wmc3zsYK53/DO8EtdlSpmxcTA2g==","shasum":"8d257c468d9bab13974b787b1b681cdff1cc2f40","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpw2CRA9TVsSAnZWagAAAIcQAIfcUqJf3klOEHhaW+Ne\nIoek7r/b4z1KXsGL3Q2T5fx8302By1UWq9JIGqV2+z1GHW+A8fp4xRjFrtEU\nqXHcDNPhlTUOy1w1XkCAyfYOcVoXKfuWW5wJDBiRUtxQbSofp3VpvowBnZ7F\n1aEXUOaStbt/76tpTsK1FFySKTerb0fPUZQybNrLsLjoH1/faUufJk4axcgQ\nwH+r355TLYhbdkR3WaOmXNCYByhXzTh9ByKsH+h6dJY7gBFGFfG0i3e7rJDA\nBLL6tZqqzYk4MPy1/Oh1Lg47ZuuQ+0gUwDimbHfeBqaIlgwBhX28uy2WAfJH\nDqFeNGLdHqhCUtrewlEDd+GRBibxEpr1RZHAZIM6eoP2Cc7hq1ZE3e68mwSG\n1JOmk3e29XSS3fU6hzTYrWG3jjNR99DHOPGEQUVP+U5m/VY4SEMT6oaEkH3r\ny6dol8JbLL2/+D/RSFYA3tLngYQKDvpzVAEYXxWGedTT1gsmyiJaVDuWLrJB\nQhL6x72fmSOIKnUjeUCSEJCmaQ0QskPvpnRJ4lRMjk5i9A7ZXS7zl5SMzfFW\ncg6+s3Si2+NBKeRbFLtpFoQrOgCczKR8aN7/hysSOdVLPVH2yT07V03DADUX\ny0aNeuxHgb+nLxQIbS7z5Rl1ttSNH8IxFa2VHWJx2nez6CnIHnuh+2qDM0Uq\ngbXe\r\n=fOAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7pAXv1YxAyJdtYzRXIZ7XawNKF3nL+VGMMdd7uaS2zQIgeNVAZFk/p+Oty0Vov4k3hU6pPhOaHb3ZbjukAIBZ0Fo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4246c082.0_1615502389927_0.6841518651268035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.2d736253.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.1e0653477.0","@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-button":"0.21.0-canary.2d736253.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.1e0653477.0","@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hxtZZHdx97CaMTm0BCr3LBl1o+YbymDVneTl43BW+KjGI5iWuI+nldSdppL7dT8UbnsPsVAGWjKdnj2GINR1iQ==","shasum":"ab809ab5f939458d18c79fb894e234acc50b84ea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FjCRA9TVsSAnZWagAA2N4P/1dyrBdMNKSzV/iA26BS\n1tcp1lWWhxVoyRngGM8rKBgwe8XLIQmCuYz1WKJk53b23J+jBpoz6xhR4i6g\nPz/vPmvlcwKi7b57r9b2Y/+DbkueLS+BW+0szrRudOM4/+h+DoCLzApDpDVW\nvV/SmId9Q6gs8EV0164NjlmYOb+FiT+791IkJdYw+NiN8A1xpDvvNnMXg9dA\nrANMmwD6+toSPbMEpiz2ONq4Q6YpEYl0P/u7Bhza1A38ZX5QotRGcXGl/SeG\neYLPyp/3FkGEH7Iija6OVXhO7QN/92DLPJ8hBR5xPjp5dq7EJKDKjff+RK4+\nICnoB5UnzJbXHWKCbChaLpXEfZyyx82uXLIEP1O859FKdjP6FQXf77GVd/cG\nqBPnQub05dJmuykXoFyO4ZDS1AwT6ASIu8B3ep4P1r7YS6jHsq4uxvFj3NBV\naeUzJl3K6kcgmmoJU8xNgQ9nAn4ZBazFFiZvLggAxQ9CGytYRv4PjzoFF2Cf\neOSRbDEEI1yov1918YmyYXovs5z9L272egjhOwMwPrmZpA8Pt3R4rWwgyPhF\nKBJI8D4mH0ExFk4pSvBlM+bwkRwnN/QbKP+g/hyNwtkTGdxvlmf0FK5G3BBp\nfgrPobhn+1U3lW9jXTN/wrSmrBv2t5iOytfp2aC0tUe8jrzHaTOK+AClXWHg\nfcQM\r\n=VQxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID412gkXn+ZEgyBV9srQUHRj4C1fo41suhPyhRW2J2plAiEAqwLybRm6xJkN+mc0VOfjxxO38p0yXnpgyq3ss8cW9iY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.2d736253.0_1615847779542_0.24993803069555875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.7033124d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.73a227194.0","@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-button":"0.21.0-canary.7033124d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.73a227194.0","@material/feature-targeting":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-O/jsgODFDIOHLt5Xs5ddLdmRlR4BGjS+OjzJb0qCdQ5XQcfbpDny+XR+OXtoq0TRqvtjjspqNXiUwM9lCepZsA==","shasum":"61c24f732bf949ca8ce34498d85b27f806ff17f2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsNCRA9TVsSAnZWagAA29IQAJwfS4CTv1x+8mSXu67z\nReTdnOOa/f6kYvDfKxnXcdUQC6Z74qz71tfZnepTBVfF03+zi5j992SZ7Soh\nT9LUQM3Uz3CLv4SYmoAoMS1Vokz4O4n9IVaRIDuK9mbmTyYnsWAQACtFDkdg\nbt+PRKKlELw+VuNwMRImCQ6iuHFDeHp3Ia0FtheX9GaHsKObZS7UgljdzCK7\nWSuEbHL6TxO6Fzef38QdBTDaN/q5kTjm8d1Zv5wRPuBvCmmj+h68qgWXix/X\nOGedC8qLz00vAEKaICC5Jl9WckKtfVedb6jiQmMMuqpR/59Rwch//Z9/subc\nftZo8qCB3+dmXXuejzhXe+xIsQp4jYbu/4SqKCdKPPMZBtB7S5baY0GxwUka\nSrx7YbOCW+2BBeTkhQ4RFdGG1n42J+oAFDFulhpVFtLdKVRGZDMbEHJWq80I\n7efxj9Cvy4kLXIFQPBs3W5wdBr7wUsh0RS1QsL5/ig6wrQMH6N+WNXmKVymu\nelBG8aViY5SSiBcCL5pi50/0NFROX4+jAxQMZn37f4lfvuGjKhEmzzUTBXnQ\nUroFWkqRTEx75ZKxTLTRQVovxOjP9gSafUvD6F7prqWJ9CBms/ov0BXPc7Xl\nYtahSIhFosL+87HqlEyS9o2e9dD+18/l/qBTVyQgxuRQh5j13ARsDxL1qftq\ng53U\r\n=tm/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR26iFp+UQsoSSeC5H73ifnqsqRh6CVZLTcwG+U2NWSAIgFA704ZWzhQV5WIzUx53nI+jTFVvKpSsuhoQhbsiSYOg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.7033124d.0_1615919885373_0.28229675319483527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.6c0ee901.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.73a227194.0","@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-button":"0.21.0-canary.6c0ee901.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.73a227194.0","@material/feature-targeting":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nBNTbvduSN1/D/mDmSu5MOc/hLbjVCfzcC8/0vDdV5XrHCgqwrMHzJEtkdQ/avIqhxt714JkzejtmFmE6PlniQ==","shasum":"bf42f532bcb4b1aa5aa93588374739c0693faab4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOhCRA9TVsSAnZWagAATN8P/i35ajm4tZB/tXOMlHUU\nKXlHPksaYSJPELnWCXaqaqLO2cG9kxcW7m5cn3OLPllv83KlQWv7aeMR0NtU\n+tQT5IRPrEW6909JtmKk1ivBfUHQNshiT0pvgu+dN1+QBCKvSv94NeFzjEhY\nlQC2C7DeFoEjzW3oJKSDVOrSfLV7syrJlZJGon5ie5JmB+RsaF19EvMJOpIC\nbsrLAKDLRU43mCIKpGjt3iQkHsl5qO/6WJVs2pZje/0QQI0OKCajneicXYl0\ngY+qLOxEo2uZnKH8zKjiyJfQL2ZDdONVWeHujMmbgK5hWjU23kMy0SaGuOID\nfHAWisPjP7FQZW9EHmPf+0mpTgc2M91TJLQxYlPXBNlHpjqu5XKGy9j+WHaH\nuvv6+u4ZUva5jWEynZZeGs/G+78f3Avef207x6mo0D1BXbXbktojqVdoaGTN\nmlCoB9StX/Pm4SB2ZPo43JnRwUKdtD6u2PDcGnq3wYKdn6JbEJCdW8yyPTIK\n5Qkh/p19kM5XoBpiHC7mSAZ3is1r9BnL6VrCzJYOzDgR0L4SFkrglRrO08Qw\naycg2BPPhuK5DI53Ke95uIhsnw9qhkGj7Kp9jYF+L153PaXFeF96DODmg9c5\nrCH1eWYi5grbsywJY91OasZkkyWpv65nnrZKUupQVtzjVI3dZ/cM8t5tIdYi\nhNIo\r\n=FlWc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUZ43ldoqwjXhOzGQEkq7359jrl7v1hEHbavVf9IoWJQIhAO26z1nJueTmMoYQdmQHfl9luiB8O9WCcr0eITZrSbgp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.6c0ee901.0_1615934369251_0.254836344466441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.7f0d605e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.941ca3b3c.0","@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-button":"0.21.0-canary.7f0d605e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vv5/1zhcSGyV0PenTx1T9vOHzKXKs/HAm5U3qAmA9OwFdUVIzfcCUAyduF3n75ME2a0REtPEjsHyzSy8GRQxzA==","shasum":"cbcd21c69d4417daf11f7e99e32ce75d92093ea7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTaCRA9TVsSAnZWagAAbK8QAJqZJ9TDt/GU0d7FDuTK\ns2Ofkm1U+E/NkEnDtISr5zBlhHaKyAvPp926fWMQ5SevKlsiZxfkzwbs6new\nbdpdHyKdYOYFms9oahJ0oEVhjFhAQ8DamW77h//gxDUcbZTBH0Dkq4eitTVK\nh7nCtxFxZX6ol1OCj8jJ1OCZCh1xp8XNJeyiIdY5hhnpqj6NGmitws9w2+yJ\nRmbQXWvR9FTRX4lfNcULMs31hYi3gkI2M2nF2iaugfC8DH4ovEyxgpHWqps9\nRI74KT2wvdAWjY+hNqBrws3qRfGJDxQC5JfCeKOgJAtbA63FLDRpiLEmTltd\npeNb31AcI1vaUnMUu5/RQozsfzi+02Lo/NpufP+VFNNhjBc0GAT+FhdDl1Oj\no9NOZWYae+YEtp4AcUVNoVxUOQep5t7rsVrBavNbC3BqtYkLGnSb5MzwQjlQ\n7dQrY34ucI3ybNcTP9h75keYYK3J1j+N7m2lAaNisOMg6O5suY/azroKbE+O\nG5SEqRPb5h+S7aUq0l22NBDsMhB+ZbvoWosfj9WZrrE0tkYrQTW8in8cg+2r\nKi2VhsnJhpDAnWzE+SN7sYE19R7xfBGTXZFg7GDlUXv5261NiXLUrfyuT1sP\n5mGyasQQfsKq78Qxp/jBrDcIIQnm4kDl3Ib7oCbSqcCPMcJQ9xoyK03okEBR\na8uN\r\n=XqmR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWbZ+43+hYvVGIhKoyBZuATi1ps+pthO2wnN2FzXd01AiAvhsJEyn0o/eThUeXKLVN6TG2BSBsnMdq6K0U5ifNlmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.7f0d605e.0_1616004314118_0.4842884044089961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.572107b5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.941ca3b3c.0","@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-button":"0.21.0-canary.572107b5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FDtDslKQ9+oWAlPEqscL5JZyGQ4UYYmsGgOkGTEKY+EOm/fRNCuimiik2QKSRkrIdPFQ/nfjQbDNU1FyYwdVrw==","shasum":"1d09a34d6fbc511ffaff0365c5a19de563a5a655","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hGCRA9TVsSAnZWagAA2SIP/AjfzzDm0e1VDK45ip4r\nhdZ8qvP5F4XeNJHKevgZOjJ3euQC1/hezgg5MI+Zjx2povpCelrB6AI5cZ/9\nNWowlQh6OnnNtNJUc4Pej9KVJcuzGosPUeMTP67/+TlCJVF0fh9hQGeVtULt\nF0dXeSeF2UarmeKOFGkp9MAGiAt97PZsVonCEVEHj/xF41Wo8odAh64+UMx8\noRCBBAjFYSMgKIzVgHo3Y0VUdzmwI4VjIXC33C80fniH91yTMD/1/newVwcA\nZ1bP0v2WPPWamKEb1gHQHzMNmh80VCpt+XH+WdKpcjoySWzIOil5/ynHo8Fb\nTj7aKHdGEaIa3j4pXsBZzk0jV2fw7LJ6mlyAGlV3LpUPmZSc5Gm8NVVhW56o\nPyKYN33G1MOCq7i/+Q5y8FvFOfbcJ9yRkwY3YQA1cuuH6b5NEvtewjlNj8+A\nn9YO3Pu4HIe9gWaMYFODTUAgMGTbExrYuk7dYCnYwBf5C6HvqNYwHoy0wPVT\n/MC6zodY5bsVCFeZe+oTCVPWWdDzLvwtfNUPTg8uHlJWhs0NUGOuhyQ8Jimf\n7gpWtKrErvv27Vwsj3ybZv2F93lnFLYY5K/Xy5MYLqJ4Nhdg9Gn85ZPvhPfE\nhqhIHmNRCkBE78GQn5GzbyUkSFpueypfn6hmN2wek/knXg0UohSCQ8r++mq1\nXxtl\r\n=zGC+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHIW+++7p/Pu+95eypaEJqUBEtctMc0SXTN9guKNWAsAiAj08tRBOER9bbI6eDM5UCAXh8swWLEmyBDBFoxv7cc1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.572107b5.0_1616111686474_0.4010793474714984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b7b220b1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.941ca3b3c.0","@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-button":"0.21.0-canary.b7b220b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rmwHhgyANeuRQuJ+TKFY+lpxQwSObWQQqOitAZo2Zu8c7h2we4UcnCY6gYnc35kPgxchi/MHfpZ5KGbczg7U9w==","shasum":"fd41368ae93ae87631b13a0f6dece321c7708eff","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5OCRA9TVsSAnZWagAAk6MQAKPGGKKU2RFe1TTjdO4u\nkhizJiZ7nYB5+H2lMEdZQ4l5NwGfPkJ3uoaHpXLMsFa6xnRyvWK3pxBjXOyU\n40JrhMoz39tJZ2Qk5Q1NqKF+xhTtw/CO/Dg3yRkQdal6bOEh549SccAimrRY\nLMJM72l6L/ISGT0jRrX52JZA7KY7TDZn1pIfVcwJHo1WVJFfADOTBtb7COSX\nSwTnMs9oLnaH0x3qY2LWOF5v3JNHRdHjvgIc+mY+oGPZlIIgvKn1T9lrOoYw\nAGPM+twDHow41j5bvISzoHyOA/hfOmvoK1oruZTytRSfw+R4LRPRe2vpPTcy\n5cjUOHjAFk2hv7CJlxXFh0+ecl/Rsdy8o7bj1oPO3hGXW0YSWF2ZIeJkNO+Z\njzFClaGfE67dbr3vKJDceFSFr+Fu7pOH2+OMU/aotYyW2cbkYap1pquP8Usk\na+4jPKe4Z96DM8Nvhj7hfQBeATXcK0uZua6hordtXDVXqmjyh7QJwo+Oyk3g\nXlZKII3Hq0JlJK7lru2xKlOwr3vPAJJsTXW9iLySB9ySu6Plr0x1yen5M8LB\nQpu9wgerjd0TXmBGaVteisXDLYitUNH2YYKpbTh4pQ0aYls65sM21YYtp0LE\niPhhmEEy1S4T2Dhz0DBKDqir/h8v/HjqOXeZgeIkyB/aTQstSV4JhzCew0pV\nJPnG\r\n=zq5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6ksNBXf8UbyIzO86ay/+YylA3uQpdAa74dwke89lh+AiA8JsURLdHe7X81vKpIl3Q6rgHFAiwRC2d9YP2ppTlCXg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b7b220b1.0_1616113230139_0.29243096424270076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.233b2de7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.941ca3b3c.0","@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-button":"0.21.0-canary.233b2de7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Yh/vBWK/NgkMRFD6x+LfVe27CxPUW4JwO4w5gxeshM3TKlu3cP2DCxY+Zr5L8LCmJIZ0NRbr1TJ5BaxpvxCTuA==","shasum":"048eb5a8115e8cee907afce30e8831fbcdb5370f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2/CRA9TVsSAnZWagAA/HwQAIYmhw4U4RHN8fkb2n5Y\nREdQxtYpchIbxxfWDxSk5GL3zZSD2E0H9s0IAa0EGVySI4LORacJTZ2evHJE\nA0yOLheu/ESxMY+XMw1LDtaGFOWeEvHrkKMKSlwuusCK8h0jd6aV3B2Xc3vd\ncSEq6C1Vwd0McIR3yYwclBwnIrFtNU2UrD+9bqm0wjjbU4WmTdRQeAOgqyQO\nMCMdvnPKSrTDT0JsrMLDu98hvEMKTT/qB7ek8p8AhUFXOx4IbdMfNqqBfKWL\n17iqfPcEkT27Qn7Kn1rMkGortfNX9nUvorV0sJzFBcBlk4sB7ERUGsndiq5f\nwl6f/GuF30ANqrpIShgbKXwZHDrWEFEUPCVG/Rh1GECZyyRcHkOOOLEdOMYb\nXAInEAgr2CpOVs6YLlkqRpHQiZ/z2eC7//kEw8DumYnGXK28TtzLier8NFuA\nReoNhh4tfu0pWs/MYYqpaILaY5P2nlSF4e+OYBPjosuqzd+CjxVYN3ApvSip\ngGF/6qOlKXvbrCvrQyHcmyQJntc8GJHFgLvrmtBh+4bDOYcMmSGqXVZkstVi\nqKHgVVct3XKDwgc7WGmpQF7QyPtemuQ6SwNs0R/Hphlx7bke1M39RgcRgy9w\nDQv2OOiNEUPcuL7MisA7s5vfRaaKVs/VEvnAvup+9Hm8fuoIbVqzzAl6Ey0k\nE69F\r\n=pwP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcvuGIuTYSWJz5fVK1SQHqK2xUI11FvQoDYyatEDFiPAiEAxMihegTSRRNnPsWjoLaAaBJCCKoZLVjKJyvqOn4AaLo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.233b2de7.0_1616178623066_0.8833411725957143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.941ca3b3c.0","@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-button":"0.21.0-canary.0c1a2d97.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wUKnHV1uFKt0ZwEVDUTN/QKRv2aVOqdnPoXxzl27Buag6YVGigFaSw56gw3JogdM1UEl0vI8Z+ofSb9Oz/D59w==","shasum":"c14b6aae21cbebd98f132e8d692c45dc38a08f18","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":114211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXpCRA9TVsSAnZWagAAfnQP/AtbB7uwACg4wRPKynQW\neNmXXwqn/T3MtobdpQ1yQ+bdS3d1qHS/tYlZiK+LQHLpSNPwKw8N+Imo3/pn\nLHyz8AlzMnjX/4XDJC6bpMm3jnDT+5afT1B5ZRUWhpSIW4bzlEen3tL8/6i1\nZttKWdqJtgHSuXQCSnvnQtKfuitBgDYB8sxJF4ikiwYbxuCvCmeMzDpBRVEg\nnjHOiB7OaepMHLX5ixC3+Oidy4rJ0sx072ZodXCvBVg4HRrKbVg7lGC1njuh\nA9Uej8kSDcfaKTfonFfN52eep33cxSbEUp1IKVxHqfQm/zd4WWq5fjSjhzUu\nx362aGipwEMaObK/wUw6+43SRiCRkFzywCG/o33Z+7MG87csDNzsfsvH+Dyi\ns9s6NyVDMvF7XXn7QlkTFCiesJGTw9jpxusCXnw7h8fUpQncxp1+6ejYDqMY\nfIqhFWGd5ttVGj9+xske7v26DiY25WgTKwQmP0oWPEMSjbZ19Pn0/Vl96mP6\nw5+cfdl7RSGqV13lW7HVeOjBuzIXeIOYRlGFUy54cR0bookNt2gqGpEI7LMu\ngM+47HueU4zbzIL/+i8Ie+T6S1c1rKXzXj5bEp7sjTdgjNwsE6zS0bBQzCQG\nxoDW1rSb0nV3eFHNVcYnSuoxoSPQMC9l23pzoyjRm2TH1PfzJBnHiRhrHEw7\n/czM\r\n=uBo8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeh2U2Bq0DQj1sowsnygQcHXNqF1Ns50AQhS/JNofKtAiEAgxGtkojj68HD36s6V2dhmAh0qFv2Ry5CXFSITJ4JCmY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0c1a2d97.0_1616188904671_0.5724912827592259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.57ca2e73.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.5f0fc444a.0","@material/dom":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-button":"0.21.0-canary.57ca2e73.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"=11.0.0-canary.5f0fc444a.0","@material/rtl":"=11.0.0-canary.5f0fc444a.0","@material/shape":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JAHt7ycQHnBBm7Vi2QTbZTnzQeMeu0/E8cZTLCCUG5yg9B2ND7VDC/R0g4QVXgNaWIDxLtIAQC4g0N3K23+mmw==","shasum":"b120681e126722b189d495e101aab77ab318d759","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiSCRA9TVsSAnZWagAAb90QAJpvm6mzOIt+v8eJHFqh\nUCn0B8il2J5mRgPcC6Laj8ecWQrSPOvjh1pD6B1LdYazgNjz1xHyhMVyVt4d\n1bRslcaw1dfka5dty9evuRUnL2iDhEp1DiTOYMeDOuA5ejTOC92srIXdrwGT\nnMNJT9WGXsMQnu+ZJ5y+p5/7eUQ6Hp6d1xHNNNklqhQCRQlsI/eOrvfW8HhH\n8joPEWAvFQhNao2DhgK7yXJZQll3b9VA51UuEzr3Ho7LnQYkxiTpRCWDg0uI\nVeNO6ALS2PB9aTuCdE+1T81nz5+46MCJR0tJSdxMboIFwXJlQkEcRHpwEFq6\nu+nevpexkDfJyEMrc5iHTgfzk0/rVMuVj2ziLgE3VjXtnIAxQLR1SGbkQXUC\nJpG/lTmeTc1zoOXylaO9z5A9JsC0rs6q46FnekxY2BlS3uv2W9ABhWQcnDmI\nJTtBkko7yuW2szjvW469wFPB51sfWRf6rlRq1iuTih6Ruow6Faf9APDPK/bC\nKo0INqSaoVytUEADzF59io2q2mUSFLof8TGY+RTgHKtJoMsiG2IE8lneXXHE\n0Uib3GTf5hAPWfFuB2/43wqPCqwXxW9njWULRbP4Gm72F/NmdezdyKq8VuJp\nNf42KBmfA0G2EW4Sfe/UXE+42+/J7KxaDRCIIREZfLcLu7LF/BipYeguITU4\nscXW\r\n=BViM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRu5NmRZLuvwXbWOZNDWHCc9CRdzSW9XQKhY3sRRTLdAiEAgL3SzHFsKH6PRnIWeMROHOBoRFFub1bFHgQiHPet7T4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.57ca2e73.0_1616193681895_0.7652270733008462"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5c058f4b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.8943b991f.0","@material/dom":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-button":"0.21.0-canary.5c058f4b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.8943b991f.0","@material/feature-targeting":"=11.0.0-canary.8943b991f.0","@material/rtl":"=11.0.0-canary.8943b991f.0","@material/shape":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UObYPXZS/uVsbBUB/wPBCgZ/Bqrxnu6wPAqt3PKTTfY3oXrUJ2Q/U+t/pwFHwlufgp+B4QP42JK2rGrSUkMIIQ==","shasum":"76580eac1becde9db178138bb0d46fa200818daf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUKCRA9TVsSAnZWagAAY0AP/1SXTGzZqvt9ucRmiphp\ngW+m4qG+ppgZditYFdsudlVQldUWhZJkQCSq5lFcJhidtBnmr00mqRssRlz6\nCoHCUa3WxA+XlGoxTokfZkSAkM8OXXQwFLzyOqkiOYGC2zH0ZJObBiVCaaIV\nQYMQLB+cjy3VLRVHljHcxQfiTpCtHnyBQO2AHf3QYyttHj0gcp+ElpiyJial\n4M7IGUwhsx83AioSD36mBMzRjdy+2OTV7aVZgBePKFaKja8PyElAXw2cbilp\nD+SRYOLVZyXpUtAsg1xXgmYMLGxblc+ITC4kNEwCk4xwJOdxjL3BQnRVNFqZ\nBbjV3UJyesolibP9plygr4YmTqs1fubo/dKnmpQVCTnfpuede70AECYtix0u\ndnUdQxLmm1ITaRvtAmq1pqszgBGM0LI2NJ+A7EtiiujA+/V95nhk3c5rhg22\nMzHQWGmgPy4dH0I2QtJeCK7cbj5SpBq3FIZHa+3SUEgtxTW3lRIKBu4R4/Tv\nZO5MBFmJlVpik0iD0wysMjG/CkbszzeLr5Hhkwrd66i/L2Y3UB47lYcyofx5\nUwcc9Q9fSceLqDRfIYK+j70BnB9TuU1/xMERMhFOVdH26ri1EYkFSNsPf9oK\nnjLK/h8/XdrkbhAezcLPdRQz8H0leaGrHqhNuQmcJHYsaS5qj88VGnYjBLYF\nhnj3\r\n=Q9eG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdLnCrYicxEpqimRKz9OyY7XcVAEOCrr4fkBwUTBUGdwIgAy3Kr4t1z4zyhMZxArcj3Ny03VOkl2njQyoAE6HIN+Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5c058f4b.0_1616540938072_0.6074753301281925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.dc9c84023.0","@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-button":"0.21.0-canary.e27ef7cd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-74kkHcLkAyV+TCJ4hZ211FUCQAig3m9cIn62w7GwKwDmC/v1MtF6bkkyI3HaVVYMWR1htz2nspMr4tQQMvTWpQ==","shasum":"ff97470532c5764ef38685248cebfa8cb2216ff8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YHCRA9TVsSAnZWagAA4rkQAKFEE8fAhZ7YgDthZXUi\ncMFhYkHpk62R59y70WxUPrhwLsuDqbT6ta/r7CW0mvtV2L9CStSVRnk2UnjC\nEFpOVOtnneshA3UfLSBkG4ems0gyGM4SjjewpU6X7+8r+zMU95YH/avCetOv\nbdKgq6YfXN+TKDnXRnhFMv1BNrub+uSfGq3da1dC/sPm1lkmZL+MzKpqPG1h\nSg+66064xG1HFh+4gCtfF3QFZiGHst+kexQyLWtrUDS9saVPSNeEpoG5mEpH\nsJOV3pEKthk5m9OZvZw5kzSwuAbgaLhO3QC/A+gfyrE8anXVa9B26m0Vy5ar\nx23YzIaMozMnzQtei58woZxugf42+lEk3fLSQUoWKjl8/7OfrgzG2yxkk6OD\n7X9aQsHSKyWo56ifJv5NwWY7rzJr07siWObbtRqWpAuH4fZUUou0QyBJqJBE\nVq2NCC1mpxRL0p7F1tn7XARgC2tsAsyHcQPbkmlvZDP22kXaA8qWZLnrXGSX\nNJzEOp6HzC6N+GneS/aOZmH2XIny0obGDqKU/lAYThVwkVJvJ2uXqcGk4stP\nwLsp6u3+5N4fmriUZrAjrDxcfH3eusWce8sRa44EqmJALw7+CKlU20tpsVGr\nUb2XN3oiIX29XULTRrUHCBQXXbA8Otu8QEcT8vBwGH/91cTW3RbWt3En+t+g\niaY+\r\n=ntuy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVmjtBR9AEEUkT2mOUd8DrC0aJwhvOkhkozpUMax15kAIhAI4aA4w+DzLj9yNMfVZOar9c4F8JM1QE7HlBBPquMufK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.e27ef7cd.0_1617135110623_0.22108749452605725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.15c09e74.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.dc9c84023.0","@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-button":"0.21.0-canary.15c09e74.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Px7y5w+tOOJpot4QkQFNza8anLaNpIOQKQPXumCNJ7csnzVIou++1hJH0yWMv1j24ZiSgxMsZvtghNIUvcs3YA==","shasum":"8a2e4c5068b93e13bd37b3e74dd417b0d6c3db47","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKfPCRA9TVsSAnZWagAAL30P/0gp547L7YXe9ZYItnm9\nPPPCa29+MVx35WfU791Rqn8OcT+mxQ/T5gVtU7ISPmN+i1nVnP1HfKpoBJlO\nq4w+aArebCUde152ZSDbZH732dU5X0MqcsVSVI/i1Tad+ELgxJiZOslgfCOY\nOEJwnAYXk+n+l2fRe9UFBkGDEkRlB0va27FFd+1ieB5kT/qRSL4i7GPVyWCC\nqy7OV0JC8y4C5i7uJmkyFda9B6PaeDQAXWmieZB+U9ux5ssyVtlGLngcsOu9\nLbtuLWoMUYbEUgrRb/F8p90lcB2cawHe88EmtKhdmMyo/5/A7mC8HjjF7qP+\nKV1z7snLStEbxnJaI9jPwGtopDUFN2xhMPudN69buTxX0588rDV++VpnNIAg\nn69elQNLTajoJkHrW0jcXm15g/ZLC68joLP+BiD7i0sRlAo6OqzVsxVy//3y\nDEYnLsBM4v9QJ/878jCX65Lwnxs16vqaWfUQcYipkut1F7plYMvvNsTDCkO3\n5WxyRVR7ek8sxxVP9hfo8pkAi9JNb3BTPb762UR6DqlYrMTsK7F3V2sbPwXc\nkheAPasrVJNLJY9jyQ/jmh02RORy+0Qed4lyJamkOCJ3Jt7sZm66pzGkUrJL\nS2qfiCPspn5IHO/BE4s4VEDGBhec4n3bKcpMyJ6bzrg1z1EPJoIEQvmzQ604\ndWya\r\n=sHUI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAR6j6aruXltot3WfUUhzGpiWq0D7AGeXCeq+3zeZKoAiEArdsMpQ2M54YY6gSE08Reox6VSEg0bm499RaiOavQaO8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.15c09e74.0_1617209295366_0.823613161076123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4dc32be3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.dc9c84023.0","@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-button":"0.21.0-canary.4dc32be3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KNuZgmYYnUdYMjqPOoH9yUCKyHJeWR9xbJ6pvpFpZvEyKrWQl00l1Ho10MBuWiIOhp9/EE/Wd0eleogmS+7F+Q==","shasum":"15b2d2294cb788ef0e684a09cad36e3ac7f3c5c9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpdCRA9TVsSAnZWagAA1r4P/RxyksBvzlFjFOAhe64I\nFXQvgF36piEcg+QmltkBU0ZEL99cKRkYvh1hFIgPxE+zBb0oxzGJD4CBUgE1\nXIMCbGUZ9kMAXsUFSyhTnQ7gk+T8pEQZTKUdQgdPWlYQE/t6uaSGTOkdmIut\nJ4JGcqH+N+OpWK6oeVx09qxUxIGVS0rIQcThRkVZjB/z+g+JiTfn/gQnfE4f\nn0L51hxZb3UO1j+k+632VLLTcd0t9jpQphUyrtJn55RC8eoAwbQ/QiP0TdMS\nMlfka7WRzu2bo3qy3KZk83lYILqdcN2GhyK9qOSJ/MlyzMEvF3vOoUDqz5rN\n6BUzPObT24Gx1e0R1i3Y1HjvRCswtxg0rTem52i0smVMxuVZGFLA/e829hXq\nHLX3Di2q/8uvIN7fS04UY+UtHj2PTdRkkauCDlxis5DX/1ktdcRSNmpQcO2V\nOeqQPXsrNzCh89y0+32Yx8lRFYmVHV9kPrH0RxWOkARrgp2YenlGmV1ZDzMh\nY8X2Lysd0pBZtIPZUXGsobalav2liToVo+wCggn81A/mjYdMPACkqB2TM7w0\nPthS91LQck5Zz+xSx0tZ7G61p6Xt+UnT84oJJHv0Lq8u7x+yzpij/WU1ENUA\nwnbuQ9fMbKZEVYgCu5i0nkamsGKoS9Hfm0HUEmnmDKSzqDUSOxYP6JgHMsWc\nCvRt\r\n=RYF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMiwki2RPG7WWGnKneBZpqU6IZUFJP5fFtoO9VPK9DyAiEA0Eqfn86ZOPJ0u07djD6YkJcGrpEwBh3zLXfcVAYmXoQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4dc32be3.0_1617234525137_0.15934204812842778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4b717f65.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.24609b822.0","@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-button":"0.21.0-canary.4b717f65.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Wi1WVs26Crt2dzKVzjvVjM9ujYHCaVFcsM4sweM2wCqDfOXl2EP9rwM5qPGNUom+kytzY6M4ucBcCLEyDbwD1Q==","shasum":"55a29924db020a77481f887809f2f7b9531c7709","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2kCRA9TVsSAnZWagAAXYIP/0WdsF7TsT4v3IvkY/wp\nPREEvuew1UStSr3Q70rJaEkUWx1MIB93Prsh5U6YXH3qEFrkiCI0vZUqKF2o\nSwHBy+6Y5x6z75BHQzd+aMv80bhC00XulPa8rS481LWn8EESSvR61oWouOSG\nuexv7Sy5rENy5ANBdATOmvoNjuAlyvZ7CoH49MRFqBYV3VDn+2kFY/gxOVoh\ntYUW6S3zoiaqOv0m5AjUXATnOOBzpfU/ctWAZIQik1aZUBNfGzVNwkXHAAoo\nBdsQxgUeP/KKlVgrUQJDs0zYfAGW0lPAbS5KnDlYd/ZkrkiA0F7RK4siRAMN\ndd80Duw0hVJCPPkOT5vzYFpqde20eRg8c/KG/k49r3z4MG0xriGYqxJgkIKT\nTSzEOGNmMQnFkf57MxZxeHJXwzLUvdbZysXsi+/dLCseNnlhDDs57TXBxmCy\naqZp8cdfPkx29u+nh92+Vmp4UQYhzYJ1pFscscL2riF7cbTKoOW3vwRxO2WI\nzXgpBTNcgPjKnFPsIunU+PwIMSkdCFQNsFkTbbnxGxcoeEInEmbWm5Gmdqld\ncvUL7CabievPop9ecYeDhTl1WaZmGar+X4bPIeGox2kvKvPTSpZE/Z37YqON\nMbr1JPq6bY7ppCh0Yep1lqYwcYhvIx9DcLjozk/hLtpeyhymSOfmnnfJI2Vo\n1Sdu\r\n=yGE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5pzlsluc5kAZgT09svO+mmm1ZEpcODl0hoec5wQRJMAiA/Ov5HdEl5qWwJ74ce47hwSVKnA5DdhWvxhSrEcDaLjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4b717f65.0_1617300899724_0.8069344252836887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c6870f20.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.24609b822.0","@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-button":"0.21.0-canary.c6870f20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n3eXt4RH/cV5dB9fCtGmCaqeEbGXq9nJNh/5t+VlkZP2OLWOS4zzupmLhE1AsffCqn1leU1I9Z7UZ+ZaAuwI3Q==","shasum":"7cfde0549ae99bbe52a38dd6641b3240a6a562d6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpuCRA9TVsSAnZWagAAqpwP/3DFRRhmAOhaz11xDJXK\ncFacyn59TcD5lOvRv7zMJ+hEfJ6K3ksNjKhSyt9SvlrXYEDQ8jv10doyvaSC\ntd6q3HYQmEimckN4mTYINZFKI8vtWbn9h8xeDje2lwbm8h5Oc8DlbqWEXk1e\nlqbmcGQ+6P6tYY34xd1bA6rC8FmaQo6iDfLplK8W6F8r3r7bSZ8gEm2muOr5\n+XsFQZKdTQwKE4C59E9eOq1EukeRHLuGfGC63mfyr6OBNcyHIbFmEedpmCvD\ncevBh5Ysw8yctqOdPobwpXccc21qCaiYqysojZo1NVFdyYuHonPHn35XEwEe\nCY+p9QhOhbHprkhTqAilLP590Is32LvFY0MwFTyw+ElHS/qUBVuB36fNazPQ\nPeB2qxsJ2l9R2md5YZISZ2cbTyClkcptlxe53gAAGrDOx91hQiG8/dlnX5WG\nNAR8Yz1lRRtStrtA9mqZzICSiFk+kjfFW0VFh3x7zzj46IQx9svzfNLczapm\nYAkIzGCUhEUe3TlsFsO6h3t2lGglM35CFncJSM4JbvgTpMxzJxcc1nN1S+VD\nPM2TrhBqVurKyLLsofHXCMmFbS98Qt6+uARyExfmq3c2cOXzwpNIyjMJ9vAM\noGLHRYwCRCnLzR/0SWrMrYlSjYo37n8FgHqRjX2Z9qlyPDlskN1PrSC5n7CZ\nWiRp\r\n=rnQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzdYDq7uf96pEdiYHPqvbyfmwe8TINKNhkUAE12mMMmAiBonhNnLR68F/dwtbc4N4G/wiZESeWnSprcP1yijBINFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c6870f20.0_1617320557888_0.49305902644530675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.852f873c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.24609b822.0","@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-button":"0.21.0-canary.852f873c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dJFo4nNB45BbY/+a8eVDHnljTm/N9uJ3c8R09+dLQfuhvE1SvIfgbsMO8J5JZ9uid3wgDi+S/dVJO4xneNteoA==","shasum":"877aaa6130e5452f38f6b7506c7d6c6331c6fe1b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqogCRA9TVsSAnZWagAA4+gP/RC3l7dAuBlHuoENLIX/\nC6FUuTeqlxjGrGFZ3qECI3eOC9iW53ef4w8+gBKlwICYSnzJqzeqbRVU61gU\nBK940pMlcKCBRHE87c8n/cvELQgJSB5puLh/H2m58T2Dm7z6pzBDP9qKuo62\nFW0qrCzeq3HNsfNwUIPcFT4wlhjzL+PoveWJCDCaXPi8SjcCZAk11t89YXyI\niYOSoun7c80/zBou3/RbjeMLIhYXy/BFmDkdobZScHabU13ON+bQqY32xoTJ\nr1YQn92yy/7NtZVI+jqNlX6QreUtZPABcxKwYwrwRyYjlzY/TxylGTa1I//y\nEaqWP2YRUeXpexLoUuLrTCgjMlAh8H5jV+W5TGyEpZPv0J8JR24KECd9o65j\n/9sq3dYWU2eoIAlOUet/7rsLtPDP9vhuxpSYUigOcJZ9G1pcjBfpk9A61O4r\ncQBIogiqaQZL9xMa+4ccP5Sa4geWbRc+jChATHvAtjkxwQvnw4Lmjn6oCkI5\nnlETFam8sTUPa7Mo0MEZVI6xeiMHIsyItRLc5IIa7fVGZWsucoppV8Am6A+v\nx5oGve3MUxVdsb5MDd6KyLqp2NTI/xmnK1ciA4qnlk25L2JkBLkDkyCYLv8T\nsHr9QjVgXgtL0DdCpsRJHIUoVzBViWQZFAaGhkk8lVnj0v5B/7eXZJqQk9iF\nAc3n\r\n=1nqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtbLOLU6vPVkOWSs3mTM6Pbm2EB5/whw5WwEUu2dB2/gIgQlvkE/4Fr8Koqo1d4FGS2pVVTSzMONonGNh8q/2WrnQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.852f873c.0_1617340959566_0.9518684846368413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.4a674a1d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.24609b822.0","@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-button":"0.21.0-canary.4a674a1d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Q47oyzrkx6eBEUfrxWzauOp22idcgNLYdPWEPTLaCLn2WM556L0eWDwotVUJZ4d7TiUo/rHCbNcHZ0NC6YmqPg==","shasum":"599d52c0d322709ddea30831a68c5755cbc529fe","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3hCRA9TVsSAnZWagAA0roP/jk3zqYzyscm7uBhSVT1\np527EDKawyLrjIGqYuFa6L/yd4NZKJyW7haAUrGZZYNiZx9ohhcE2NaAWnYt\n3TXCIAJHO3HjfC7aAkdF9Lqqd0//oSsZ9Ak3dKLpTdFH7TCN4yTMhJ79SZ1R\nnWpVeVv1UOOaXt0zi2FJIJd6ZKm6niGxzxrYHyvuoJ8DuasJzLTTv0WaP7cW\nTdB2nJNZC+eFwQarcHrsIbjwzG7Lk5Ohate+uWknWxXXnzgpWhCkt7NNPigg\n9P+iIkB9qq4b4J0FkZLYfIepWv+L3tGEiePC/AGqiQP0eZOM2jE55zJkYjv3\nSWnExg6q0bxxM5BJst9njzmMoBPHZ0nRXb1xOGPxeK6M3bcWX8Wj6nJEY3xQ\nyv9t9bhHSMBcN7Y9w9GgvSUSmhD0k7PP1zVR9eLrDX0WpjSZSz0ER+YE/vYi\nruUF3SJjQuL+Upxc580CmN/nqntbXCK+hzQHZaP8SungE30hnLs7RfbBeL12\nD5Mug7bGqZdv3SHX7x3JoH3JfxxM6tsiDYLgxEvtwSiELlPF6qaScmUN77Vv\niyzRhfm/EI64JwgarchblMJ1lmyqrH7trkRedUUtjN15Hvv9bGBsBNdRuSK9\nGIB2LIP3StbG1XcDxE9vJ/UTIae2/zfH8JENtAbQGjFSFVpX9jGDEQSEhjqw\nZn3s\r\n=k+uG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwdyQ8c3qOZiSIKxuVspsNx0MNQJHaFoK+ImZgIDhnRAIgfBHwKBBUxncaxQzZVbDkTLXdb4vKqPC343TYPpQleRE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.4a674a1d.0_1617374689075_0.1330283434326478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.24609b822.0","@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-button":"0.21.0-canary.c5b29ff1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.24609b822.0","@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ceuXgB8YnLe/tIxmuKKO4CgA6qry5NgPF4Tt6Qn7O2N75UgD+MugH040w7XDXsWyi0FHfO6CwB/QvF+2AbeIyw==","shasum":"612646ed567dd5368e86867e5985cbbf84a950e3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03nCRA9TVsSAnZWagAAVGkP/33g3Sf6qHccGfv2PCoP\n2WmEnpiTZTYI2FSowV9p53NkGs2rS4wgz98VOkwF2WAMeBSBf5jZfqtfm+sC\nGEVLV6nYT0PIAtDmqiJg/Bke/DQKhQ96ezYkFl0MVQBU2dIsmpcYgKOz2Hb9\nSv4cSUkeWvzPxoBPpTESUFfr9Y4DA2Kx0hJDb0Jb96CFiwiRlmKHOchjQDcg\nG05x9w/z66KymxSzjda4p98tXcAFTjXT7H70Svfe+LgLW8pQgzpCdH0SHZ41\n4JlogGaUP/K/4vXJvR17v1y106hyG3qfzU8L9sdMoa2Lf5kqK1BHtz5CrhVU\nMYLCkgXos4QkB8Vm9+o9A+O9c/puV1Q/5YMlgkncRv60EuFILzrpVtGF7SPI\nhyKTEMU4fr4IE8HTTE6cPSQBIDba131HIR6QdRRUAjmBgXp7+OzjlWCqT1ZR\n8nhzyDIMd6qhrI7n033DHxAC/SvEH8xXnlfulXcLyyZ1mc4nDNt/4kNJl4Jk\n/1hUBZCzMw83GtIh6GEfS+QPbRGsCnaRz8ihox0y8R1Hk8i2y9HGZhVHh7I3\nF0sxJXFb/PXVCopKulHgB4frvgJAOOani1igvlpnK7uF56P6vJSVDIZ2tbIR\nZfI3tw7Wosutzl8ZNjAtHigNVTl7u9NUS0vtmaSX5nqUtDQ+BvZbE4W1oilm\nVr0K\r\n=ich8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDYWpacj0Mp12BjaWpUihz/IeS4DreJigWnBgO2EZtcwIhAMnJcKhWG+Py5hBfg73BLXjmkWqr5LTA5Jwq2TiU/Eay"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c5b29ff1.0_1617645030696_0.19838038142504688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.583644a6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.94f50b260.0","@material/dom":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-button":"0.21.0-canary.583644a6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.94f50b260.0","@material/feature-targeting":"=11.0.0-canary.94f50b260.0","@material/rtl":"=11.0.0-canary.94f50b260.0","@material/shape":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R9RcibpP08BflWVcvAhS5jjYdqyhVC+mru25DfCL8TLgwf4+nf2hfgBNc+gKu33kT3BIFblY8BXUW/k+S/1LXw==","shasum":"2bf7c0cbe2d4fcc7bf69542c4f58cd645ab9c4bf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04gCRA9TVsSAnZWagAA1wEP/jlQ87eMCNFwNQA/XwwG\nb4rTecdlVopVkjETruTO9ZBXRfWOVMXaAU00GhTyjuh0VxP0jZhfnNbf2zzg\nT58K7fpOYVc8+qqySTMfDzbeV6tO+ZnwyFbjM4760KEOb9KuICWiqo6p5EVa\no4AuAWO06Yaaf9t1KPUMssKOxngeBK2utJcK4EMJXQdHAV4W62fl/JVqu/WR\np0/9NdTLpQglQYngYOpyVRXSBoO/tkVrw1FWvsd7tcCxxIkg2SPKgE7tFbBu\n2OLb+M1AW9fvLT92SV0k5wNJeyOcV3lBrAdW8jsvSXLn4Y0QLX6fW6jbHLBM\nteph4/X+qsvwVXLftach6TnkzPaXsp46unIULY00BPiP0p1DbD3JVPrKQVP4\nFSdCzNOlz+jRLT0+NKVQBVnz0YGBRCKXNRtK68x7aNgXPZkMFD+a+bLUyYCD\nA4OiJQ77LKUnpGOCzOiQeph1LjONdejSI/mCzevJJYIKOJGQznfwSkS9fRfa\naX87NjOrL3nN2Jc6MvYu2ziUt6NELM/HtoxIoP3b4dld3eK4zQVnTwUtketi\ncqGzCugtlNO5+yi0MdpP8zGpTAK0VdPvxNhcC3rO03feE2yW8ToD4i28PNZ9\n2IPhSA9xQKPVn/iQ6wHCHVEEfMMWun+F63U5tv1VKSUqQa3BFweVGknB1g43\npXHJ\r\n=XJt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhASUfD6QVJqlOz53H72IHTFv5RnJrt5BygEt/BysbwwIhAPnxRw1SKWh8/QeFqXU/S1tZd4T2SaQkDE1jyPbCPMEc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.583644a6.0_1617645087651_0.9886528653060134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.15604bd0d.0","@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-button":"0.21.0-canary.02ac1e6b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wS/T8+ULtu4+znqA1AxtCRF5uA6+U3NdOTTml58bqgYzliHj+jc/fGE63/p8CUX/01ZbxmSKbsSmW74OlQeHpA==","shasum":"5d50a2c28914a0a746c06c4036778395877d7121","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKo8CRA9TVsSAnZWagAAnhcQAI94L6+Une0Oy4qDridw\nGqaKmtXSmnqLH+xkHMNnL2hphchjUGjoWDX97rtUrKEpObeOfRyDDnAMbT8e\nzTRcQtr7tL+Stzy34gBv+gZOh3l1ue8B8pMOpHoEh/tiFdfmuIi2qz+52HGu\ns2Uh5x5QZ7JqEI2HX372FCeMmy22anjMTx8I6gXjaKKcYoYFKzRIb+l2LnKq\nqAHAdRTbE+cRfZaxKkn6oJH1x9N4TagFJaMBAFE/VN/AvQwqhKBoNkftsjtA\n105TqsxIFFvGvC0G5GhMj0w7ff46HVPvwuGJhPPcPCHOBF6mlY7ls7vm+8di\ne0QxSkTZxvE3gJqXO4fsE352Gix5jtjSfpj9JH48w09Yf8M9RynbjcuThbrS\nBbtpDi+ciHf9WrRgl+7wEqmz8XBy3w72sHeOgSF5kIMOgZlXnD7yvyRKfthX\nHdLgVkIXUx9FDvfIClYUpP0rsJzkRF8Z1wzxFw7ptlm73xcPWXpWzwpoLYgK\nY+pzXsqS5z5U10K43a+8OZ+WP+QzQonY6sRfd4F41oNh6KTg1HLaYi2G9uUz\nz3BDInCJlELwJPbmc46CQkcthRQ3wvjh+pGu5aq7Ia7z/1gVFbVgPOLgaUkJ\nq73FfHztAI3wUGH/rH3XJko7wGm74mFuuGZj79HAHY6Jsu7Vdcy2CvEF/38B\n4uJ3\r\n=EkqJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpuDRj2wfSbDmiyl6Z6q+VfI1qZF/koV/2YPlhKOsRIgIgH8Rp2oVBr4Q3rR0ZfczdaKQxcmK01v9sSMc3MQNHI8o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.02ac1e6b.0_1617734204151_0.427713886696907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5ac5856e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.15604bd0d.0","@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-button":"0.21.0-canary.5ac5856e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IO6j2cM8MtQ31KQuEU5T/3KT3ZEpJ5dtIm3+oExloVhx9JAF5QkajXSa00GzH8isYjwxo0ckqUBdxe23DwJnQQ==","shasum":"a9c3356823da7c2fbce87f44343830fe252ca3e4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKvCCRA9TVsSAnZWagAApU8P/1Wwq0zwPj9SQjzq5a+z\ng+2qtSTNPYixQCff0qJgneWVuWtzzyrLNV1qQFEqx0ta6nXlcwWmc6wiZ5Ef\npz4CLgY3PGK+xvfyLFJ6WxZaRAr2/PPcgJElRqUE9bq9uzFKwJU28iJJIkEu\nNefaB+yx+rUL5Wgl0BIz/dOH/aylskAt7M+ew4hV9wh1Gt9lb5lRRtp2lsV9\njBT5FgviuJTfuyQtCnJKFKOZBhUaF80+KEp2OAVvYP87EsU62oMl+2OJ4Leb\nyBRMgKtLSi532hqcyQ0BCfXlw8WeD7nFYanAVIAemh2DbJIzUP7LzxDzBr7S\n4coH6ae5HqUgXSRBA1SUg50KwQcJMl2IWYKgPNdUT9hsp7vOxWZx6nOBsb2G\nNOWoNIxnCpELJVGB8a3/fedGYhKWmKEqDgJMhbzp8AYLpx4pqe73bSam4V+q\n7aXdIkMfgvZ89JMYfYTSOWa+rrzYjkaOmL2gWh/jxmHw8XSHtb+SxjgH5Wpo\nEk+CwNeV+m/RvKSvssogMn/XmmFlMBE2bRRNrN8sTr8+ivzXZSJCJ0+Nrksa\nFPUVy3xM7hb+yP3F1XkClWIQS4EaS34eDcznjjXF9f4GcJlqs+tdWrIubwQX\nivF8HcgYwdPWk3gZZ0DGTS0IbICxhAgL6ooEyoQjAywhqKbIfnVV1ffeLYJf\nuOd0\r\n=OtQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgvI3kAIxnCfUXJrDiAk9nehTvbWRaYGk5RpxUHn6ODAIhAL8XZ82ICW80y0APx++uLyp17IJ8G8bJiXvaPVkrZg1n"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5ac5856e.0_1617734594000_0.3243617427031389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.15604bd0d.0","@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-button":"0.21.0-canary.bb23dbc4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ShLe4fcsCXBFbbSls2cdKowPEm7Kufb+L60K/RWP5TnFskcfhrrphweX5TIBKgGxhf39Wc5ICFIpBJkF5q/Cuw==","shasum":"827adbe4d872c59c11f077794bf27963b2bdcf76","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiMECRA9TVsSAnZWagAA+6wP/ifNjE5TMfFpqe70qltV\nUh6aVWBRvw3wggTEWjsri6gELAfcmWJsxgWmuqyoS14xashRhRBYklZo7lJf\nbEIoXTSldLujp6tUbbA+gq/v6tmxFWfG0F24GoKZ0U2R8SXGjVOarenOivfq\nGeTPGXDEOFg4ETxw3Uy+ocd/MP+o3nT9e3E0kHE7jHhyAcUPo2L5eMCd7rGL\nLHCOEsBc0xy4M5fqMkvTqPGAwOBycFgOo1UjkbipB4JdF0pOEbml8avPsx8O\nGZ2Ams1n3owbw1y+OeOspH5mj0qh1WCoAFwvg7U15ov4hdI6rxo58va325+4\nO8opoW4pc6SeMoO0MJBg25r+0W5FFgQ2ODJdFpT84MYY2p2hlAl3KITQoppU\nCcjq3bPryd1cuNmhkvVN3LRHlIP6nFTs2HVVeFtoumhvyGFQXlHNmazf8V6U\n1DhCJAXBP03nO++E7tqyOasN1HZBOvAEoP0qalFmzeLrXkU5/1PNkjbA8aZs\nJDJlawk28yh21dU9wG25MsG4PAVP3zF4fiZ+RgALZ0JFmxNh3PpMg0TGelmt\nSVxxPsMDd8UzWp9Wu0ucIllBX/ucbogk1Qadz9YUhI2U7WrZ4Hv0UElBJiZt\nLOiDwDeXUlpk9Hq6bLoFEMCZjV8ucQlaebpZ0cclCECVJNW4rLNWxWoje8/h\nF4Dj\r\n=okXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqx9L69xpMEO5PbmuHvZ79o9Lokm1NF01wUeBxwLFyBAiEAw9AW7zwj/DSfKajkfL1FCR3Bw3yF+ZcL6/84K7J2JlE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.bb23dbc4.0_1617830660090_0.5845936390126496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.e539904c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.c91e8d141.0","@material/dom":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-button":"0.21.0-canary.e539904c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.c91e8d141.0","@material/feature-targeting":"=11.0.0-canary.c91e8d141.0","@material/rtl":"=11.0.0-canary.c91e8d141.0","@material/shape":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xxkP5ZLlTU97lTI1DdeTVcO4hzp66d/cIMX6vJmytq7l2nC6d2KSN25m4UOgTHhGPc5vdfhpH7JXvjwODtUWHw==","shasum":"ac93f12b4b17949503fcad63a3c60dddcfd1f96b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":114635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UyCRA9TVsSAnZWagAANnUP/A6LNXL7uWJQiBegBfOa\n7QLTFh7vvFdRurtLbHCRzbvGA+px+8wSEdGkzG2fEG5qM7FhyfYv5yfNzKJq\naPU0RHvcIPUp2MqTNqL2KnSIaZcEMke3sNc+/6iRDU2J1iP7Ca6l3IBA6Wdq\nBUIhpr6FrHLKutQaify5CLBv26F8MzMbRrNuvN0WQsg7cPVAO2U4c1+hp2/u\n6gx0pxDgmNn5kGqYDhqn5EaUDwLY9XjoDduscPhITGkNItEjXuhGSDaRALpL\nvli1lcM+WCVw/eolIq6gHDbe1DwpVgxdopmP4XYXEOJmhc3ZAv7B3ILapGRv\n7I40ASsl+lYpCfEKjxLFYt/rfd/Ff8x3ATph2xlf0nTrqfmrHeNJVQn9fBgu\n3Cf0Oj5XpcTtD70cuooR2XHbl82mpbqxaWRaJjd7ot4MC+vrIp5KrbEzAxgW\nK2KVaIWDLbAsSVGbNGekws91PXMxplL9ZF5rakSFBkU8XrK3C6fyWnAqxUCX\nhWPSSpY6WK/mIBMd4kxUx3FFrtyvDZs5iFtiXTSeNyhSA/ZKeyEIKjt66AJZ\npijD15SVJSBJiq6yj+YA5qWBWMz5UB3N9Yu30uvvCufBy3u1Tu3Ir9vmTMFs\nJUwI71nUYC7WttH9b8LU/d1dqx4Scym5iCDMoYR1129ubT7p7A+6ySd7u30C\nygVo\r\n=1XYS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTSglmBqIGlsrjCkUVicvXEeJTyCeQHM4ArKmv/ulppQIhAIOQs97b8QCQ3ZyjCxgB2zuOAIulOe5gTUK88H3j1oSO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.e539904c.0_1617904946202_0.9317895393780886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.a93ae333.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.b2fa996a1.0","@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-button":"0.21.0-canary.a93ae333.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ixFsvoyzAVHtLLa411RG7VH2R0p77FxxbWrc76fWKOOzaAjlRCQdGBTizX6JCivNxJFQ5w1bLdWpYr4iglv8pw==","shasum":"973b818d09e76ab1cd161510db57b932877e0755","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":115457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUWCRA9TVsSAnZWagAAmNUP/2Nf6+ypWckrrQayHoe6\nQkC45wQikf2QWhniSy+sP4Srxo70ZEeAmW/UYuHyLVbs8qHkNdJNK8JZ5590\nfFew3UjxOpUY8ivTGwdKh+Q0NY5V9WFN7sxzeClb7vQVNOti4KsqobjermYE\nu6FCxytEfwALFx4092byXVi7y7h/n2pDKGWorbrjhCzfWucFJwQYubaBIdCK\nVIZtwxakMrX/k/PpRKHz5tP2gZCmlHNXUeBbSvmsf016KS3Gt4AxnLxuJiQa\ngTMihmt9bTHUbvO503IIEDipX5txumMqK0UGXJ2kW9GgLVvKyK/fp0WJchFQ\nnhvem41TGC2cjqDks7O18xY3KLDITOZU61xWpqh1u/S0vX1E2cAsQRDy5AN1\ne1cJ+uQbG3C3f594axw6U7bbrpGd1ddsD1+Tq9ue88TCiVx+US2xW+qcaxlg\ny0s++0ztinxxKk1IyG5jo6cS535BEWwZQ33bJ3fkQbH8EnvzNlEoHfdQQfEN\nrV22SO9I/u1J8Tuyy80iJcNerAfYleKGteNXnL/kArH/neoBz4gLtKCQrYyR\nEQxJcsj/8JsZLM/3+87TtixHz4i3Ay2UR5L2t2hg/nmJQrKib+cxX/z9YVdB\nSo6GaftgqwJSqHMUChCoVo/WfpcQD3sCXiDoiRyGDTAzKnbHwfb7tU1tmJbj\n353N\r\n=eSMh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3QWlfEeEsI70pxz67vUAT45wNGEKHNYWpC76CBVwysAiEAj7ijplhW6e8mikw7HQom0T90n6XBTzQ9i2N4i0AWIKs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.a93ae333.0_1617999123116_0.6453301917376459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.e142c144.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.b2fa996a1.0","@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-button":"0.21.0-canary.e142c144.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VPRMyv5+qAnbxORV3GkS2GSwsKLndnCsaMlCv0UyWzDYpBe7pfsFXVq8srwq88Kajw+Km851h9kmJQADNOw6lA==","shasum":"7e5e3ddae93c6e1aea011d96d7434022fe6cd4c4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":115457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5YCRA9TVsSAnZWagAA/wEP/3+qW+iLZYvvl9/64Y1m\nHMN5VEzNQyhT/GVbSPYFRt3gLkrx8lDhtRd5yqj+rvEXXShXYWJHayGdVGyF\n4mKrF2YGxdMXxkcKTFn+nH3C8EvGUSGkt8uVaeTSDv9jxNE5oFvHdXa61t8q\nJhSVYRx/P0rpELaBHnRE6ZXypf5sjGgDO0lBCOwHsDb2mX1irDDwWZaTw8Tt\nvtSVj3Wsm+pQPvHAbUvEGNyOOqDVD6mdL+u2d2LBrcKSTzvYV65VJohhWA/m\nWXTCxwZ2gRJfUI6UsYluedJ9GboqohALfoL/GgtKpA7P5MA829SdjZ8wtzb8\nsuNp2EbgvsqBvwEzDk7bNmDkyIeP3kofI+5jO0ILvz4X7zykDKQjNWK68QQf\n5AWhMt6+qdUw9ayNoZlLO5ce/WoWQ7eNIc13WUam78wPL0Ql8tNBuoeB24mQ\nEtrueqH0DfaMwZ5xPHn92/H8Fn4TAb3pMkoqaGPODZc/EZ2cwjXztqVoLhPK\n4oW1TLTsIPvzfcmfs/ctwnQBdcOIrdFysO1/XB8B/hPgHma0DWFtmXpunEmf\nxwjVTifYYHWY+cGBD2QPConkJnQhtVpaeEsfcYGMt9VIOK+26tIuLsZpt7bT\nF7YQFv0h6UrFHwP7JDbc7cRaSzWlCaWDpU7cG+5qVf1mvruMwRr0hdcxeczL\nZxYz\r\n=IyGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLs1G1+mZ2q5fKSTLcCtye+o81T2iqCUf5BkB8AGWd2AiBsu0bvBmkFTuHR/nHKpnQSzfgD/Fc7NJ5nd4htw2hWVw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.e142c144.0_1618239063496_0.49278374617495624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.382d7eb0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.b2fa996a1.0","@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-button":"0.21.0-canary.382d7eb0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0e3a0O6rgW08TPAn0a1SrRRW1rDQDH5qvuRmAfMRLK5ERTq9y2R05POAEefV2hHHmxtMzRU54IcHc5lD/1ONxA==","shasum":"9a9d98a1d8481cf9cf7b10cb6a56661deae9031a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":115457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMRECRA9TVsSAnZWagAAqlUP/2qftoklwASRE9F9B7b9\n/nIw797b0Z3UZek4fFMuUhTa4HNy6DL3+JhapRL7pButzlHWt4UO3yRQJ1uR\nwb3texsPlB4Sxwib9pb90wpmScKi59cYxvz/zC/Hjyz8hz63tsa3uqItHfhj\nYFGs2rRnq7xi+XSzksAWPbLUuiQGqeo/7LIbCMWzSE6CXiRKVpjX48Q/0/2A\no10L0JNHDdepvQXwnRMExvLumxKtqKutsLJY9hm8tRG7mznPaMXRq5gdDBzy\npry1ISOF7HvVXAGC13taejzAWnNhbTLiKSjK8PhpovweGgRWDHRfJsXuquIi\nhY7b5YZdBv6S1SDLcFaISO6NcHpMeHkoQ9n3J66fWyPxxREoVKTW4bOn15zI\nbfxzcSMJEj9BlW1UpWcb5Ay3yN16O0vyYGtz6JIUNzlLdUrx5252H9pOeuVS\nVHaliPGq2lLw8AvNCBVaqp4sQydTCR4fM5lo0Eom1csiVy4G6YS/0glBJy0N\nIgehsM2du1mSqTMBlJuV7rkCtbXghEUK2n0nWrKOlJwpQiZEmHE0CPe/A9mS\nByX/8+DDehPwHBLyrhWigoLRCV99cIM5qXGiQ+sUC2HCsEkPACLabTVYpt40\nLF+kg/4M7Xfdr0qQc4kbHm9d538cNYPmypTm1yPnPKXDlo3iQmmioe9tbh7l\nMhGK\r\n=T2jo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC7UsZRPk9cs+P3GtW6cBygNIpBk6pU5R+lqFOl4XrrwIgdNjWEfVXjf0lgqkeoPcS7L/MEbaFUATXyzNEJHHDKmE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.382d7eb0.0_1618265155822_0.6360117405645249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.b16c7885.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.352b295c1.0","@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-button":"0.21.0-canary.b16c7885.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xl+eNN1i/cC8i3nSqtlKjDT3mePxFYvx1xwfaSOPk0MDa62S7Qziz37yftNhxOUK9VNi4sFCzfInNYTiqIh0UA==","shasum":"520d2dbf223cadf9b5020da041f885be667d2ae2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":115457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwmCRA9TVsSAnZWagAAfhAP/1PeN8MDBr5Ox3XqW/Oh\nx/6l+g/XaZ/3cy7Hsz5TS01mi0L+Mi20+vejSaalYQrWlPrRL3AAPW2JYL3e\nlFbGYjBn29FszKrzJVrTQpDHoGP4Kk+3F8wFiHtyXmJjoioh4cYwdv3WiHEJ\nrEq/8UJk4JtdeBOS/jqEeuyJ//5YHI7nRnZf3Gm/ZtSj8xMUX7s2LUbIe0em\nHiPg/5r/CvLAS78W7dJMqWTVLAUZ/6lc+F8w0FNlRE3mF+mexXtz4FHluwbv\nbJaEWkh1vndWTKmdduedb5+C/zJaV1wk4dudZ5u5xTCzTjNc19nh5MLW/TrS\n2H42PG7BvrzxuM7MsB4hYiOEKJXeayHHoJ/JOQ86uxTuDPeHe6aRXCCl1igx\nzB6DFUrinJluLQDgExLZzoxJp17kXHeIRehHt1j/zweVpq1NzMdeaqpLYI07\nPcSTl0SweOmYXUHDL+4wSi66RMiGkPSWBzwIpaXSmc3q9jq2zM1dvhNgdVYQ\nronVljUS/scPs9swy3uQM8TECLHGkLxiAmvHOtoyXZeNZwYs/SHMvhhra4un\nioBv891wPCWBrOkBT8dDZU7r224klAMhr7K8ns6XGihVpiPlOFviBxT5BLCr\np/xjW3XkwtUH+5o32DV7xyAUTgZeff9Q4GS2R617QseSlTB3v29CNWnn5s6r\nNfHJ\r\n=Homc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmZRTN7e1qrIjKz/WCRL6/m4RPcxmmJXWzJTmRkP62TwIgPRalKk3l7c+6ITx4fnAS1Rmz6EK44jBWwykPv7HIF5g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.b16c7885.0_1618267173988_0.6733423379631016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0e92782b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.352b295c1.0","@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-button":"0.21.0-canary.0e92782b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-31iH1WehL2e4TRsk3u6SNwXxTelLAOpILH+QORzchc2Z2xYrDIEtYLCl+/18UzM0ZZpzMxs2MH87M9ktKk1Xsw==","shasum":"20f407b4bbfaba6dcf2038f40c28514d496fb48f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":115394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3KCRA9TVsSAnZWagAA7ggP/AsbZrqkTM9wlbBoTlFa\nLgBewclalCqY1aKMLP6n8RR5ZGptnTJ+Q2q+HYStuEF9oskL2Ix1lePGU6x6\nx2eDE/uiTjHlBDMLXhoYrP2Zwzy0NveTf5mvefTxR/+4zQJoaZrf/fgCz2R6\nir9ukMnGy2oDNPDukIwx5DbjFNm3rQWwQeIomSNqzW4iUdg6cOYNogyOtbJp\nEx08Z/Q0bquMCoovmHE72ua/X5aJSHYJtMe6hlEPM0WvraXQOnp8REMUueXV\nUNHVSsBmu2pe1Vouhuljo2iUYiRCP/RgPmN1tOxlwbDgyR4ntTA58cpTo0ha\nCusRdsCkENAk3rp2Ans6bcJSJML7X/fap3GZZ8yg4cQ/8YFkjMbKt4tzKaob\nLNiS4Kq4K2wo8Zzq8JVXkSv4ZcjUTjaPYTRfLnf2Dh24owa1MmkZFDiCCfIA\ni2js8jmuOATEY1Kp4WrbJn12/Kthhf2GkqFpv8WAE823h0hG2SXrG/LB/s4l\nICm2shHJO2Up/O+PKrfzEpwdsFij4ZgAsswERS5Wa6sIywL5I0IvwrZl3BTy\nkkCPhFLQCf38PELiKeH9omAVKE7zpFmjG5oxnwDvAT/rGPl/W3wESL9wSCOi\nVIK0KcBDSl9IzGj5N/qTp2yHkQFw92SwHHnvxW5kxaWqOho72pN97dtjiZtK\nMjvg\r\n=K0Qc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwYdz2G01uFADgp4C3PrQ+Bf/VK0VVs1wHEueJEglwPQIhAPyEQB0FOLZ40Azl06zIhKtu3kU451c8c86aKO3GfP0J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0e92782b.0_1618324937842_0.14319950117122437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.70b3a072.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.352b295c1.0","@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-button":"0.21.0-canary.70b3a072.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.352b295c1.0","@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WzIK43AHsiHX/bCcLDdqKQ4azP1V9nFVzBn+t3pTbJ7T9t7kzrcdF3Pr4BX4l4+JkEtOBRi7CBOvPvP3opsHUA==","shasum":"a411b340d5f3fc1e3536cb3481a0a58afc233063","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":115394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wkCRA9TVsSAnZWagAA3FsP+wdB+rymiKqZYI80G1qL\n624YiEPoP3LI4U+kvG/EJuRTZqg5FfP5qEtjZAw9OUOiml97XLz7SrRAmhkE\nrMA5LYzk2Mk/CQ+lGD5UTpmYGYdraeJt9m/O5e4BHIaZi0ZxAyYaYDizk/9O\n2Zsd3HX9GN9fvG7vdOtKgJ4lpzYXvS4d7lDjR92TDGXXNtknzL/R8T93PzVd\n5szDd0W8Y3vKMtzJ5DOeQ81joAD4VR1ZzUjddJKnLbaeQrEHBCpBM3aHHgAi\nPgJDysfUryFV9kGc+R/HhzA6iOk1weYMVLYl5HfqUSz5ckSoGWizM8TJvGTR\noKzaH8iL9fkLO0modniLejrNyYw7AqKWj2sm5PfE24Ier2Nb+G4csr2fPftL\n9Q4zRDt3jVvbHp/Lz3QzL8Vy9tOl70XnGSor3D75NJWsp8S6lPHFoHC8rjVH\nqRPX0u47YYNekYdqSKNoMLN/wumEWNnPP2LDmpEpL6HUEHXmBggukD7ZjR2A\n9v442DrFCiXGbA7cYKy6NIbHMiZ9fNOrKTrYBpnSHHvBlX6W4ffOuld06WTI\n2HV9WBj7JoIxMZPu7nmcu/6jgiLcQ9S7eAoT8qN9DlepskBFuE1ehKW8qEkd\nu7wmr2OEeGJyzltCiw5A+H2e/rUAtonmiUDd3VYm94Ph2+TZRmHboDPZT8pu\nV2GD\r\n=zyef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCAFB9tPsEAbFGwT70P260/rfS4uYyIcUAyzPlAeZVcAiAHwB4+J/REsfAaXS8akxOWzgl5C6UbuVewsiYUdvf+3Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.70b3a072.0_1618439204411_0.24200745990368788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.ff79b092.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.3793a3143.0","@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-button":"0.21.0-canary.ff79b092.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.3793a3143.0","@material/feature-targeting":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LJxTmThdkS5hvMraPE2S1YMBaxqCjpsDaFfhrofNiNbMbR8/gZ2v0cXhLqVYHGxUKO997maypjrE4AIIndAMWw==","shasum":"3489f312f0eee649a421edb4f25640c47d2223f0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":115250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1DCRA9TVsSAnZWagAADYgQAKSw5jvgvVz8fdZNV/7C\nPSibznwez+hL91wlH/XKtt8gZ6r18T3GYACVfe9YzSCj5telANo4kBKNRiCz\n9AjGLDS8pukIQ2o8OCscgvWdLDgjLXOyxY7YQ+DD5RG41fYZpox6ggniACca\ndVhC5SG+t29/jix4BYikReO6MDzfboFFXsmdwtydF6gWzG0JLIIpBHFKdgOP\n1xVZtXLmoD/lCEKPQ9+nYQVGHb0Tm9aHS7NutaeqwnqkSsMRiYGJ6zjvTJkD\nzrxeCmTgpolqqzfm3KADkf6CY2ntjoeraxVc7Ch8KosoFjI3qdPpyn/OfTfZ\nOdi29J0PZVtcjpFNSqAqMURS/E5EevZlg3fNK6eOj1spQPNwhXu1dBSdJ0gS\ntufvrN4+6ZJCUnJ1n5yXyZSK/PlPu9LbPTcuhhMtyQ8BCaiMr/PGnazUm0Wa\n7vFdmF+br3oxNSY33Vm7ErGnBBtxpo1SJRoBxr7VSxrInL6UqsYYvoPyYYDY\nK4CIp+z0L6nXJ9ZFnoKBBkcPDJTZ2Ekzbmk/fMFYlV4ONdlmxQMmfepLlD+Y\nwFAckduNMNoPvva8DNEIQbywe8WUkNEwuUbExGEbJnDxv8AGl4V2+L4s6DHT\nDkOlS6eV4cj14FeoJzKG+vTNcQFBUtMGs1Oj3nhLEUrh6vPswYNRPdzERU0W\nKWG2\r\n=aUds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbaPkjwmH0XgTswZoPhHaxZC3M6UYQa+mmLqxcAQIXVwIhAOQGRENY9mOj/5SVppaSVDpUMac+2Zbaic33BSejPLb+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.ff79b092.0_1618513219377_0.618333909648596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=11.0.0-canary.3793a3143.0","@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-button":"0.21.0-canary.f35b2fd7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=11.0.0-canary.3793a3143.0","@material/feature-targeting":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iBxtGF1o8yvEdA3svKeOdC3xq0NU3Kkz7EdRTxshcwzsiKeohcEaCUDQVurs8Uhm40BjJrfhoyXNfqTVfCYASA==","shasum":"13664411967f91a198bb0be84b40414de55ae221","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":115250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+3CRA9TVsSAnZWagAAmf8P/RoDyp2r/h7AQXVvcLP2\n9i3f0mUJsv/FFORgVQCcvvcpo+mQRm1bOOcFwUbzWG+FtDITRVTXHstBhnJm\nBC4aH701IqMGz/S/LRXKnFdttaOxBkNGbv+JwHD/AhTUg2vXF1vxHfaOipNa\nj1EP6Ni9BOhpADx/IAPtGN1F4LEKVyQi4jrbGdJGx/qGRlkLHCTbKomeOhOh\nCaYH44A5DJHq5QuVxk5Tm1WkB5ra3HyUr7yqTER26ti3RNhOEslRkqmCSvpK\nc6p856WYQqZ3jzDNOQvEYQWOqm2XibND+MGRFshTLx8L35VGLiMLcNmGCU5p\nm25JjOBs/nXa3yYLmRKaOnMAcIaykyyKSsB8paXd98OllptTrt3+n/YxP+Ev\nEWiBeVxLa1FiNpkrx3lD5ybe65Z0cIUtGz8iA1SUwhXaiyobotbRPGTuLPrr\nB6vi3cOCvt6V1JxcAMFHPJR8tTH6uvLU20bfJNJlpprsL0aK0T0+CJr9VC6r\nwR5jyNEo8s2JfAeTksDitgEuEXbDLlmz3csfmdojxlEax1SVYdqbxblX5Lil\nLVF1yrx1Y8L3WNs0O881x0ZqdEViMYKRLA6RmuD1YygbdH3CfGS34NYEfVt9\n4BhvuzVPFhx63WrvIqYUM5nQU0C+SY0eaHcWLk0c/Y9BkXTNPmoUaWovEV0z\n68IA\r\n=A39Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT5m4u//GaYrjf1UyMQ9ZnA1xF+YCgvYPlH4ZgRqPRLwIhAL/BMr2NY96hLMhq+MZw0E2vLUXznQrx3SBPmOCYehgI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.f35b2fd7.0_1618513846593_0.7370151333737891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.11977cac.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f342c3f4.0","@material/dom":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-button":"0.21.0-canary.11977cac.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"=12.0.0-canary.3f342c3f4.0","@material/rtl":"=12.0.0-canary.3f342c3f4.0","@material/shape":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eK/QQYLVAvQnBRlCgHJYBmMtgbDOSyVx/emOsaKEySNjo1dRGhZq5GuQ5rv/bIuAuAv/zVJwBffRiOSGX7KNOQ==","shasum":"07a696f373df574af0b7a0555ca48d2d0cbfa6d4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":115250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOE0CRA9TVsSAnZWagAAFe4P/j97ib02yuVW9oELf8Uw\nvW5raw5HyuZG/rkw9LgWSvHALZ1ZqMMG32+EG5FRB6Cwy8FZgWVCng/YRdmp\nOq3cMvcD2sgu/20GUEUO5PhuQUS1iUm8fwe7GKJyFEUikY9JGzu5+q8nOjYA\n834e4wN9IUJ7TVob5/s12o64AOlTGUP9S00O0b95m0fCek7UpAs92bEoobzu\nuWABSGBnc0oFhxePmfk8OLV126JkesMDNqDFyE217fMSXeQG/o//E04RJZBX\ncexcEYC1qhNauD9w2fyUbF1NsA6w0es5xnxJYJVRfGlvV4rn6bdAnu47i+RJ\nWfqepEK5MzUjoRgQjOrvCPN8LNKAMC4Ze/DYvI6Yc0GrpTTuJEqjwHozOl8Z\nkdmrIwTX7cq7Tzm6SqWHyyicqtOkVvAvasuUIdsXq/CjIpbPEdoYkkQ70/GM\ntm9+s3itXEGtg45HzXVbPtjDwzq+GVNEcvErzYhfVrlFzq0T18JVV+t/4fxU\nGxvqHTp2ecy0eUxqT3ze+ULwWbNRMrvSyRQDqNcvJ7WXBeHNZsjZNhBie/zz\n0KOCyVMZvJQShjhsWwiBTjGAYWndQGmIgTwW+45wSOIRfnWIOTGKgK5E4fjE\njjP7QtTaSLfaRBf2Qq+9bn4Bshi1cydaq35pelx5UiX8tcKTctGSPzM62kM4\nnA/j\r\n=nDOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDenQLuHuEWG9pQrT0IDmR+8l7+C08IxFVRd48Tl5eHAiAfDVc1YLgK1Dibd/hKpHmi99HAKuhAdchDA18zuASP9g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.11977cac.0_1618534708125_0.7535691398256146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.018ff45e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.cad489689.0","@material/dom":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-button":"0.21.0-canary.018ff45e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.cad489689.0","@material/feature-targeting":"=12.0.0-canary.cad489689.0","@material/rtl":"=12.0.0-canary.cad489689.0","@material/shape":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Description |\n| ----------------- | ------------------------------------------------------ |\n| `primaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed on the bottom right of :\n: : the dialog (LTR) and above the secondary action when :\n: : stacked. Automatically clicked when `Enter` key is :\n: : pressed in the dialog. :\n| `secondaryAction` | A focusable and clickable target. Typically a button |\n: : such as ``. Placed immediately to the left :\n: : of the `primaryAction` (LTR) or below when stacked. :\n| _default_ | Content to display in the dialog's content area. |\n\n### Properties/Attributes\n\n| Name | Type | Description |\n| ----------------------- | --------- | -------------------------------------- |\n| `open` | `boolean` | Whether the dialog should open. |\n| `hideActions` | `boolean` | Hides the actions footer of the |\n: : : dialog. Needed to remove excess :\n: : : padding when no actions are slotted :\n: : : in. :\n| `stacked` | `boolean` | Whether to stack the action buttons. |\n| `heading` | `string` | Heading text of the dialog. |\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the scrim was clicked (see :\n: : : [actions section](#actions)). Setting :\n: : : this attribute to an empty string `\"\"` :\n: : : will prevent clicks outside the dialog :\n: : : from closing the dialog. :\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when the dialog closes :\n: : : because the escape key was pressed :\n: : : (see [actions section](#actions)). :\n: : : Setting this attribute to an empty :\n: : : string `\"\"` will prevent the escape :\n: : : key from closing the dialog. :\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be |\n: : : emitted with the `closing` and :\n: : : `closed` events when :\n: : : `.open` is toggled (see :\n: : : [actions section](#actions)). :\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute |\n: : : to read in light dom of dialog for :\n: : : closing action value (see [actions :\n: : : section](#actions)). :\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – |\n: : : Attribute to search for in light dom :\n: : : for initial focus on dialog open. :\n\n### Methods\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------- |\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). |\n: : May be required if dialog size is incorrect or if :\n: : stacked layout has not been triggered correctly. :\n| `focus() => void` | Focuses on the initial focus element if defined |\n: : (see [focus section](#focus)). :\n| `blur() => void` | Blurs the active element. |\n| `show() => void` | Opens the dialog. |\n| `close() => void` | Closes the dialog. |\n\n### Listeners\n\n| Event Name | Target | Description |\n| ------------------- | ------------ | ---------------------------------- |\n| `click` | root element | Detects if clicked target is a |\n: : : dialog action. :\n| `resize` | `window` | Performs dialog layout (passive). |\n| `orientationchange` | `window` | Performs dialog layout (passive). |\n| `keydown` | `mwc-dialog` | Listens for the enter key to click |\n: : : the default button (passive). :\n| `keydown` | `document` | Listens for the escape key to |\n: : : close the dialog (see :\n: : : [`escapeKeyAction`](#properties)). :\n\n### Events\n\n| Event Name | Target | Detail | Description |\n| ---------- | ------------ | ------------------ | -------------------- |\n| `opening` | `mwc-dialog` | `{}` | Fired when the |\n: : : : dialog is beginning :\n: : : : to open. :\n| `opened` | `mwc-dialog` | `{}` | Fired once the |\n: : : : dialog is finished :\n: : : : opening (after :\n: : : : animation). :\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the |\n: : : : dialog is is :\n: : : : beginning to close. :\n: : : : Detail is the action :\n: : : : that closed the :\n: : : : dialog (see [actions :\n: : : : section](#actions)). :\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the |\n: : : : dialog is finished :\n: : : : closing (after :\n: : : : animation). Detail :\n: : : : is the action that :\n: : : : closed the dialog :\n: : : : (see [actions :\n: : : : section](#actions)). :\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value | -- | - `24` | `0px 11px 15px -7px rgba(0, 0, 0,\n0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0,\n0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description |\n| --------------------------------------- | ----------------------------- |\n| `--mdc-theme-surface` | Color of the dialog surface's |\n: : background. :\n| `--mdc-shape-medium` | Corner radius of the dialog |\n: : surface. :\n| `--mdc-typography-body1-` | Styles the typography of the |\n: : dialog's text. :\n| `--mdc-typography-headline6-` | Styles the typography of the |\n: : action buttons. :\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R4sMD2GfP+Lu6EDX1XwhFOeZ5DdSh/IuknCbnmumCgjCLztqktpAGumibR3J2fyZoAKrfkx2AALf7GsriZcsFQ==","shasum":"7063365b600b8692c0650991789889a4397ee777","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":115242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3xCRA9TVsSAnZWagAAN9sP/3AUMsNobVz75wgt0k7N\npLr0jQ7QxJpUgSoshOLvLx6zNXTLAxR68IZkn7eaiOqcY5swQ+uiZRQygVJT\nZZhFSRsdrTRtSL9aw3UO04F4I3oO4ftaUaeGuHImSjMmVcR7E9mCeBRAaIDL\nMLX3U2b1NTKARbhB5cwmZyJvygMhXzwcioHnyA45MOxDoVJNwZ7MfNQB0hK0\nUb81h72BQqBscfb6VX9r8XLKVWz0WSezVe648tcWKsNEZLoazDSEacDAg7Ed\nEDw/kGabUpGndh/Y1tha+GD1z/efeeckxteDj3/PiHVljde/cVHE1GcFVUg4\ncw1gaaHrESOUatPJGOs+1wiAvksRyvQHI7WPOr3UsQ1r/O0fAs+I7z5hp0qJ\nNy0wKg6Cx1aAB0s2yjXrBkN1y7k2XYPQiSJwpPw0zz5jjA0ljuOP8KfLnjWC\nCVYLi1OIa8oUUmJze5V105sLMSLdU/HXKriArIeQg7sPojRImcyTifhL3qZz\n4VMqr0og1EPduFGbYMdbwP+BfM1JKN9ZINtmL10/EHa4vIfcn026H+RPmgv2\nLvkkkFQN/6IT5e9d60x/Tf84RsYrsCwcc7z8/4BtQi+Ftz78mZkAZBFlnwGY\neQ4bsRha9pobyKbBqMCeMNeS5gKOgNa2kCv/eBzKbud3c2ZQhLqoQ2sJPoPZ\n0Ez+\r\n=NnBo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6xn7Shq76FDzsSla2tiu6R8HTThWk/7QjvcWe8LVRRgIhANIPMMWD1iTJZZSse9Y+enVVmcV+21VsswE5QesyADop"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.018ff45e.0_1619131888756_0.303109982733188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-button":"0.21.0-canary.c99d1fa5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z/GAVBEcj1skUsXzphOzZlYQOMPV+ueyB78oYsgZ18vDrvEv/Ro20iPPE62jw+whs4+Fer26Vb2vA+8oEuzhmQ==","shasum":"ad476da84cd7ced91b0ac1726f99dd60ea09f08d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":112433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxixCRA9TVsSAnZWagAAkH4QAIrGOm1oJpqfZRy6El91\nk0YNWviIVOJR2dYvuQd6SDvU08kaE8G77v8atFJMO9Z5afVDpjY4EYfy2yNP\nJO+A7omXOWu+l3nkEr3ypGi4AUJenZFbmVb4udsRmaDLqDywmxsMqSNaDOZg\nOtHBowGecxrOAOEN1kC8bq0nAoLLzBqwq342o4ofzhbCL7lcDxRv7AOBwjmh\nDoLhU29bikr7R3TA4tKYqFO5TnF3tnmaKr3thzh4Z9SrLukEKDhlN+dJVbk5\n3KKLeHbEkvb3W9FxHOqMSnB15PKBQcEHx4MCcH3TAKYEOBdrlDZTep1lHFW6\nUCGq1V2VSKKmUvqQZ7FZO3BFDdxGqTHj21h8g4uJ1Nu9x3g+GVkNeTmzhZfZ\nw3wL3YuxnNcme9cAFtZULiV3aFAMI9LHEXFB4Pl4y6ViPpkBuWKoyG59/LPT\ntTV3xr2HB8pv5NKKzBEgl/GJ5WneD/03utOwOApOX+nMYmMOrGD7VyCwjdIe\nIf2RLmS2IvsIYx6+dldOapkY7RRKwrPXmNeHs5hKiFNHHyVbpZuEN71Z+Omt\nXOr6Gpkd0LckqzSQUkMChiZT7fA0aVKWPOVTUmXQGqMTz/BnchpzgSS8hKvT\n+0fAkU/jXKqlnmjTwdnTNLGbjQXdyvtoIcrkOR35xljDv+EfsVsjwRAyHOfj\nP/VM\r\n=Cwcq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGqYyTM48E/09XOuhD5uCPZg8QBJzWTya6cd2VvxCaWQIgZ8TZjq0yxPIGbbRbpxQ4KdJVtOqHOOH/6jfMSTzcmOY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.c99d1fa5.0_1619466417386_0.507085640592277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.eea9b304.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-button":"0.21.0-canary.eea9b304.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nWakSmYo8b2Uysxz9rLzdXiLw4aF3DXmDtVaEsJVjCxOnfWLCiorAapdByP830FR3XL2gQmksiZ6DufCAmkPmg==","shasum":"447360ccd2a7634f0675cd12996d1bf71a8e97a2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":112516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXvCRA9TVsSAnZWagAAGaQP/RzVC9XZBB3ZKiYGvMuV\npeDZD3L/oM2fPBM1jAcNMnmvtTMieFxucVKUzWiPx0IbmY173UuMzjBxgUks\nO0CFjOR15Z6Lrca2F0+6srpTxO9tpq6578CIx63SdyhhDHOLNdu8D9qQ8yPK\npa/4jtB1f1cl0TtARYrb+YXPVtBKYjCWg0jzFpZqDTn1TskAF1pikxZQpnPR\noL70Wo68qRTdQnhFxmQ96v+zvzGq6hWbhjg7IbnlsW0+1gw0icnlerGePdAb\nxbZsdGRv3CFdTdwh6ddFqw2joLQ32LiwgQ50rUM5UQllYUWtZmhdCy3HU6sk\ngakJcSAFAMXPbUWQFNZUmmvRtXtTodjrpeksW+rUiNfFKgKbuyPsfb2X6Ua5\n373cVFCQ0a+GhVpYecA6rPRWxO2O4V2Wms7J1j4WxOVD71CF43nsWw0rhc7j\njcR3BZrzdkKNqcSOrR2dql/j+GrkvuYcPEefDrkEOR1NzPb9obB97Wpknyav\nBz5K9H3jsjrmJFIKSiOZkn39Og8eJaHzCic1+oKkkaNUVR4/wP3Kl952V0kd\n/I7+JnAQO7OAfYkSjAeWgG/aONbm0RigYdLOOfF9Z5uusd8Zu3y61LzhQMwC\nZvsWDZPy3g8mAdp/VxrF1cowJVjWTmI45oTTG92v0iWWV3ltbeSt1RsLJGCI\nj5Bk\r\n=EBlm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzbCTWvjq4BTLWzEEr4TJlZgMT7bfVN9Ey5onFL7djcAiBn4TkuSu16wCghpHpbMCBAA+ejT1yb7Yz2GskTOh1UjQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.eea9b304.0_1619564014841_0.8863691970350389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-button":"0.21.0-canary.5dd85d0c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I/OnuI9Lm0doBnKaSCl6CaL+HrDkUx4hpnQMQ5nsn1qFwQVGLboBMrFaTFI1lUAUSUfIzmR3DnpUZy6VbgrBpw==","shasum":"529e98d354a599241de22b9b36314ba587176979","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfSCRA9TVsSAnZWagAAnegP/2IjQ7Le2uiVhEoS0/Gj\naL/u66dsO8/Vfs5gtqYRjiRG0rgmpj46c/viSHHkVbtvt6KCuV1P8UJWBC/0\nXvPSKKQHl7BhiHJ7YxrHpp7N1kaXI4KvtsnoZk1TQ1kMLx2VsYJWp0xFEm3R\nEV5+W/Xvtx0Vld0/lp3xN95eqXnlRoMY2Ijl9KobB3F6gNgVcDCURaawmND5\n40vlZYvY5x0M2Z4lhZ2AyTbDYQginlkTdvDQCP0ywsUUSa9hL8uQ7MCkIFA1\n5Kz1B+2LZP6ngs8ucFy57iQbkYIWlHgkiec/tun/cDUy8K4SSjB8EXACu95e\nlQYKAXc7h0L2OWMzXwy4eNVJf5HK7vJ7n+V1WOKpDfVLDesJvEZU624HRQzj\npG2361XQvIontg2iIhhroDVJppE8vrBEElipNfMoQwIhTcPAGt2V0DDbBf52\naUm1tC1QViNGPsojFPMCnvrvVS3jMKfV4+JC/t/vMq7PAVBM/Ms66HRPP48l\nii7JPUL2m9sjk02xKtgsa+6y5AVdIxEEpuw9AQNmO/Lns46wAh7+Ks+eLumE\nuIsRzWScXgkAjaWWT1o2vHzdCWdPPOIyWNf9CmgwXSxmXmsLQiwlIiQL1NYl\na0mSCX0qCz1TQ13/gSnTtQlpc49bUbWB3Ly7P+qRBiIEgPHNCMtppPp1mZmJ\nSNyt\r\n=WOAO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLGjb+MDAxSjw8BMTStZUpwsFBvf+CIn/PCAjYAoU1cAiEArX4wUAh3ojZwCBWDeUrBAVWQDfHQPN8zkOoOx1+i39Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.5dd85d0c.0_1619568594355_0.5261818961524729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.cc813cff.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-button":"0.21.0-canary.cc813cff.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s8aaWpAQDDG6yHK+RTWfAmv9zs9IxK4sEF5hjQH8cdhwLh0tI9iPBBuBfYaOpRcY43elXHDM6vuJkySkXjEqCQ==","shasum":"e80551d2cfcc2ed7c6e121049977a58d073a6e99","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRvCRA9TVsSAnZWagAA+4kP/0l+Y5hDIrJAfRkBSXky\nla72oFmBvMBfmbeNIzjMv4UUY0WHgPp9+LfewlOZyOtOsj/zK2GQZxVjm//F\nZCX8cdSxr8PVPLMkXEjSkCmspxKbgtaTMAuzCaxXJrxIJsipP8/dhtjeTDMs\nT3ZRSrnEkbJc/4ImLELmMx0coTusYUAy+RDoOtVw4lMvLa9lpMtwcy3uBM73\n3iSq3clGzGLwnY0Ts1obWGiRDDk5nu7PC4EfkwTBCeGz3Ncotvf2bkIuRITy\nhSUldZRIzpVtwn/bR7jZhjQgcxNU/nrLAidpbq9ovW+seVTJJyE+v1hpYM98\nBVekzODRNlUlX6EG+R9sxpMOd8hTxoI2+TEb6YpY4D7iHB2mvraqr/f2ge/I\nb/sQZIPfZ9PXkr3hAGSsHk5nKuBbaKQxuBS+tbQUIZjKphCEWPPgcVSShMIk\n3/QMoqhqszPxVS+vY2MmK5436PfhOXopfexoiPvVXP+JjkdVbtUx9T43k0eE\nvgI01jgBF3qOa5gjOrd7eMVk2iJUnddoh4Wml313n9C0nQ/ghRPywijErqUX\n6amXpfab4+U7vAGhPAxUzdy+Z9t3duF1XcLYH3u+tDHDBtHVnVIFqCKr/dGS\nGVv1TVJ4dAHrJbMmfemBJD32DZd0+szpDaMHRKu5KLPpmfaGpN2IbmeminJa\ns7mE\r\n=y1ip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUS9hfulSg7+pd3TEcUuwkZZfW2F5LWoW4DcyET99j8AiEA5UIyI8mwXEkPAUecubSSt/74IlMKTO899UPucK4rmTs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.cc813cff.0_1619817582874_0.7405250532412166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-dialog","version":"0.21.0-canary.0875e898.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-button":"0.21.0-canary.0875e898.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mBqAHbP/3IKrUAhIGBb1QT+PsR7IIzvk+wkjat4h16G+aE5/JappOAyT8cJSyECng2L0km1EZ/qMdxdJwGynyg==","shasum":"6d507386b572218e4bc3d63feb9ddb4782a7a80d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZbCRA9TVsSAnZWagAAswAP/RdUbqBKXLupdlvp1U9a\nmzWUeqsI5rr/wAVLApcWJsl1y41kGLaW+BSkHGZJ4vcWoXdjOPLiIyFWr2qK\n5bUewUtWI/OTXZGAo8QnZETVW4m4LGFFE4WibuvdlpC64Nqw9/LyWdZ4Zq0n\nPNqhgfS/6+QXfSTwXKAr8a3AXEwHrIY76/qG3O29YszeVzq0WuLwLlpxd6D4\nfgvWc7X5lnSoW2nFqiy/Zxw4oZ8+abBG7UCX5S5gim4gjVkvS0dsZbE7JgOT\nj99ncfEn/cYZhloKqNw97kYVI+5zely1GOtVGrGEERHzvXjK83FMJIValM3v\nua5ZweaQRKI3G/0dXDhgQnRhY0MvBzxv4Qu8Y4wV3JtRtT3gYdc3HB0aT3Ff\nGlCw+DN4/eBoG1bUIC23TxKg+Evznkba3xj8Yb55OX19aNGIVjt0QtHoX0M9\ne0/K3q4/JQLiGeItysXdse1XSKQHuJI8pHj3gWO5/J/VWEXkgeIFnPZ5qBWs\nvcRkVheABAA3vmcCgiShU5aKNaamsOqbTCrMBVffB5RwQpi531hnencONBhh\n0FCmNuZhGFXQmXMLAsZKV4DDMmsQMm/liEmCP8AMd1xo9uCVxRRMV0DdMuzW\nZUZf/QFwFJ/tOFuSwf8BIgsl5ZpYXR3BaRtMY16M2jiGpp67+TV67FVw30pu\nfeTw\r\n=90BY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDpxzAemd/SVGG3AKPaaals9oz7zyPnKU/yKu/hPLIH0AiEA/OMNlEz3L1t+RqZBKk55D+PekdFA2Yr8OIlmptcSVRo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0-canary.0875e898.0_1619818075360_0.97603707075654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-dialog","version":"0.21.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/mwc-button":"^0.21.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-3ssU6uQ0PXt0vH00QLE4qDCtob7i3SR7sBq1tsdxxB6oNA1mcnzzk/IGAoeHAMy2O/SHGKUCjB7JZnsXEhZPEA==","shasum":"b6649609ddf5cdebd66351ad9af94bc7a3225dd6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.21.0.tgz","fileCount":13,"unpackedSize":112486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmWCRA9TVsSAnZWagAAhKQP/3nc9dizbtvpj4eabQXf\n0qfM2FzNDaM6f3QCX6KGZ5aE3CegO1F4Do+HlxOvKU4jyTlu6bw0E2XQB0E3\nIiRwjAQf2KLN7vPmF35yvFQInU1R+EKAEcdsWNBmiImARS0DsuaWuwKzUhc+\nN/vjLEXlY8yDRCqrOx6Rb0Z6gITmEBuRvZhSjcDcsNr7wnERd8JPsUq1CTF0\nOPUegeD9r7KBzX2oJH55Q62O071zDM2UX7tMTYJP9rhaqwRt7/LtkS+kowtN\nC9IsM+NWyT3SCRBEB+yKudb+Uj63N+1gDk4h0Wf/qUippTLJmHosghKqlLak\n+yIc7KRYs2vyKyiDL1kiGjVysS6xOfbC4Itqrds+y3XlsGC7g93qU4xP2FoA\nWuOgxx7i4+M3V7bjVQ23Jb8CIFuuWCGhj7vGVp3Bi2RfdLvIA8Nfd3qGi/Fy\nfaauB4di10RAcSg6TDdcK15CXV1zXqRcB/ZBd+iGguMYOcuaXgBFURTXmWc3\niTy4+MS2SNz7nxa+gI6jVfQoFx2pYZvyJuwRH+WS1f/bfNa22OaEtIzlyVkY\nqHzB9JkHCQP7Q0g4IISk5A/hrYH1v10cQ2CsY2ejikkbjRVwelwCiKhGiCv1\nAzdpGI97ws3GXA9XRkr/CzQqTvvS1d5LLuHwXn/kc4eDSZQu2AwF9ZBIuMbr\n+zlZ\r\n=hh12\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNeWyDmYbq08ETh5BSJdP2gOVIY6/IVJtf0cVicHOVsgIhAJ9av0JJHsqFpfe+zz/gfy6rJHiw1OjtslN7rkFKTvyN"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.21.0_1619827093816_0.8350214344663323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-button":"0.22.0-canary.8f1e7e1b.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZfVAUBsC8n3dbb7P3oo2rWPspzlprgxfw2+aFMb4TvuWsxyJTdILNCKVT7bnzixLLLSFZAArRQ8xbF9nf+mNSg==","shasum":"7593383f5b247b943344697b09230e902377f5a8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtUCRA9TVsSAnZWagAAxxkQAJwz6Y4fTZ57KCSObdZB\njrfGxHXj62nbSl2DDEUtYL/3XO314me+eBaAZpez8JQvy3y2toaCb0IlCjkT\nNVOYJjYHN/+9rK8zaqY3Tmw59cB100Oh2m1MoDOnCOy/J3s6PagozyaH9OE2\nnolXpM6EbwLT5wA1HiaVBg8YM2Mc5KWJkku1tz6M7sitCPaij9/rCdYqeh6z\nVEcscdjz/zA6xg6YNaNRx2/Mjwud2SxYDaLW4lbq0xyq5tJycLSUtWL2SZXi\nJw02eHBytNb+/WtHD7vks4QNSV4PvH8iFEC3pDg0dFxCu2LoAGXGTIgF2Cwl\nP655uAUxd+yOcEgeuklJjfp8iSGwDnpQ2e5+7ABjdi4Cnmwn4J/gt8h0w+vM\nsFtQCqCYuIJ4Fi8OY9T8g3MfXYaXxHPiNVck6DpGSb860GfL3pUkqDPV7Cha\nQqA5kvICPtyWDOOXzZtKH9t0j/ED4ozMmaAnwpuCif53DeWnensHKkkU9oo+\nXUD+0nA2m/iqGtkSNedGRJVPUwMPTnBT8ZWLirJi64bEI60XInK5B1uUvmd5\nu4r/y0h1r5W5K7uNfpt4aHpOZATRhv7Ej665MvqH5SW8IRolAHLqwKA+wR59\nBMh09GGgdKj2jA9vFPaOXe7NE04lnlGS5+Hx9Pb6KxA1BYsFCmzIi5f+g9rl\nET37\r\n=W4ux\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCphVNeo7GfYSeVg/buSgkLfzr5/ckCqjduAkdYaISWfgIhAMGhptT3vrJirlBeR85oBsNSstmYSd5T22qucbp3SFp+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.8f1e7e1b.0_1619827539678_0.8610800332786737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.deb0e792.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.197f64fa2.0","@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-button":"0.22.0-canary.deb0e792.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yl3tcQIdP71MTzCf4kV7JFozFvmp8hFAlQa6LOpeB77rpqvL3cHq4FnWMOf5nLbd1+SzZVB3H5QQOvqRk5O5AQ==","shasum":"9f19e0f845f4c21123ea11834f2f22c102b1aa76","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxqCRA9TVsSAnZWagAAK/AP/0hk9CIVBow5LHTQ52E6\n9iOzBpZF3zjrhEQavOAkBPkjHP3J+1uzIJCzIMFU3zmRejTBJgfGJr1vONYj\nYIOqMcaE8M1v3Pfh3iLD3Yjmz78DekfaVzZotsTiCPo4KSCVmFuf5CaZvBEe\nJKOQ5wPEBNl17EeTV0vpPUWRz6Tb7Vb+wMaf7PlrOJpa3/d/P9rr31vNr3JE\nzBe/y/IIU9H9YkuVzYugu2iCJRWwg/wLVAbFLrht3pj3QW9EIyus33Jlpw+i\nLxVOnBIjMvTC9Sp7MQPGd1D4gVW3LDQcqMN7aQ2ynPyO/14rt81XM1AYyOPM\n/DI2ebZ0JbL2UFWFDc65RZzBx7OXA9lKTl6h8ONxCpooWw1Pv1bS/fGuq+RV\neMgXfSgcKlMAER9rbcoF78Wg2efzz5qqESqASvkKEkEBgW/QDhf9+1IGJfKf\n5C8z27GS1cjxTnH+dBGVt4aL3D6JFT3A5E/lv4buK9T9lDxKZ3jrUcTRRdur\n6b88FlgdkOmBzqOH2RFnHjBRLDydiSrIrra55myiTGjSqh+Wm/600BfDtUzM\nm1ENhqPIvtgn7ybXjbTis/Af5y9LVCdz85PznjQ67r1amgt0SEfdnyEgXxM7\nCcL2L9ia0Nkk8CzF+/MtmlIisRr2johOJU1/bIsRQvStkf/KxdKv4COs3OEP\n48b2\r\n=hCbG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7uuLLuMNWuI02K/krf4786o3ph/oJExzKRSs+tBiBMAiAatTzJMtiaR+OEaYC10FFTFi2XoJK3KAPxVIpcRN0aJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.deb0e792.0_1620077673773_0.9485118286106573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.a3ff615f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474836ad0.0","@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-button":"0.22.0-canary.a3ff615f.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474836ad0.0","@material/feature-targeting":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DOVEffTktQYUXkd8owivCHNIydMi1mmU+7f4NgyYREwSNTLFFZKGBGzgTqCxHSplkeJ15hnMFnAEIBS9JuLuUA==","shasum":"6c2f7afd1f7bd802eb8ec923c718c9728cca46c0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpWCRA9TVsSAnZWagAAokQP+QFG8BN93t+Rk18CPVNP\nzkmlny+RTStNABMwKtPjkxZfQHBgyGB4lf0Am5msHWcFDo0daUdkig3NWAN4\nMy2/yCunihGbyFqCbipENXFwVthx2IJsalBDQOKdQpkJxA62KEZRFtGpol9e\n+0bA1c3F1E0w3u8DagPpW/u8RZGjeDyuIPjlGqOBDHIMB5jjwrSBDKRrIvSS\nM4vP8LJLoThbUuLEndaIbQz+R+i0L8LyipXIApX1sZc5GbLEPum4/o+DUHho\noWInDB1/f7UiUS7njpZ+FTe/KzdQ5I6Vn67bK7EVXy6Dj6xzRWAH/fLbj4dO\nBjOyR6BYbqWZafZUu6WMnemAaMfPoJDpZg+HCjopVlD35yr4dIXuHnHNXrOA\nrem40Su5ZqoRvCn+iHP1sPqtQdsHbs9/LxkkgA6//8A9TBrcb+ah2pKa2iBm\nkCGE+/2lXTe8LAZiSiqEM+3ZrVmDwF319ia4Us8rJ+C73Ed72ORM3Cgxavv6\nyygXaxKHKkbqbJlDblvLIbGnkk7Vjj5RyHexV2OKwSDcVrtjcPCJAPRSh9au\nWO7DrZfkeXrIRO6Bfg5xWq7uqwd9fdpBOhV09awtWiSvzJj6Nh1KM+pYxpbi\nRUrNMEonHqe6hxix6a1ulrJucGQ8oVUjoWZDmclPzGZBtiX9cylAcU5rxQKh\nlyms\r\n=d+ly\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnRrSB9jOUrohVGsJglfRZH1jU0U2gMEnqNPlCZJ4lIAiAgRcH+g2x+lqQ5oXjuBedlmKYrkmT8BYgNi0ym0+HnLQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.a3ff615f.0_1620081237410_0.771620094178225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.948ccfb5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474836ad0.0","@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-button":"0.22.0-canary.948ccfb5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474836ad0.0","@material/feature-targeting":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H+w/mE198AyNPBeETd2mCNEdk+t4Ahh/tLHxMat8ptTVFB3o10OIUlkOFIUGykDGXlbsWrMfBFvoO+1rQ81JWg==","shasum":"86666a448c3a400ff2f759a6bdc0e67ce034d97b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":112538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEZCRA9TVsSAnZWagAAoLMP/R8I1bTCeRyYh1Z+atyA\nLZuG+LrigREyh1nGnCOq3YzMoPTVYPNlbA66j5B+pTVUkfWVptV2ls7VHAq/\n/8K5breUSo8H5kg8h9HhJcOoEl9KyW/61ka61O+1o2lwZOmvr6DTW+5iudON\nl+433cZl0GPGI4OvmVGN/5vrW4HlFQq+v+adbyp4uutB2UNtYovafI7/cUL3\ncp6lFQK8wQSkiSF0wcRquZd/hzgHDn8MyFRIY3yvrUSdI3QiHZqDpOEZvBgX\nNZf9gTMC2dleSnBXGe47vfp/6FpzyfmUles1W8y0SWolLNhayKDhupY6eFSn\na7jgA6REAL2piWDiwL02DMbGi5HC26loGqJL2p/MOZidoAykRBXMXUO7S2BX\nepK7pfo8LQ7CcKmbn4M3rKCBASRK30M9GCrpDk7AVZXy4OrDukXtpptlMtIv\nujDbUyX7XD3QRKfphQF2K6/O0IfD1oaG5zs0cu6iUXUgV7+cFUjNRC+9s39+\nb12l1m+eRWW5dLkf9Wa01EiqzZHHOweUaXaUx7gJPjxg4R3ovhJAHQD3k+Ni\niGcv9EPT3P52vxtcFTrxon4NaxSrgxEVxEYpOWtOueegrJuwsoMkkqxcYro9\nYXxo07HxPcApdIq3gf1uoE0WXjxUYQllQuXhjjXYTUjevWjrXr1qFB0sO1RT\n3In4\r\n=qfZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8JcgVeEoksDtFqcBwpcr+Gc2GoEC9EoAqA0cpTAbbOAiEAgXmbY74B9pSs7TCf6PmwbpekgQnLFJLPXZSMYJRzp0E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.948ccfb5.0_1620087065419_0.04570773549596141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.9f8337d7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.be999eb08.0","@material/dom":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-button":"0.22.0-canary.9f8337d7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.be999eb08.0","@material/feature-targeting":"=12.0.0-canary.be999eb08.0","@material/rtl":"=12.0.0-canary.be999eb08.0","@material/shape":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d7ieVRbbWkHvTCebIfzwrt6u4Hp+w7P70pCpjHYolG05OPzcCDhFXQDJR85PDwjRGtOWY4Pz5It0DMrlge6tIQ==","shasum":"0a90e7f2a2223d64c426936e062e20c9dc62554e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":112540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRdCRA9TVsSAnZWagAAMroP/A1KaSAI6YJ8r0zSiMCY\ny/YgbWgSv0Vd7MVe0dgLB6f/uvBhxW7myIj9J9FAAv6GUzGDylxiqrcxf2DH\ndTKwOaEGsdD9VXI8aklemdzIrWl2kz1S+c9C9kNT/FSKiy4qS98d3IkqJIfE\nguYFLnabLI1maggxjn/ExYDAinzF8+hzaPLsz0/6ewxC0Y4SUj3AE15UOkzm\n1rvK6ncn7lva+WDMvqytXJ+ehCX1Xj84zWxPY6qZWmwmLtwkrtkG4U2CreM5\n//22MzsujgTfXBakk0vPNdjtpW1K8QmiYU13O8yza64x3nCpYerSAOzIPyWR\nHMVGK9dYxLSfmfs3bcJko3vnWAfBE2NGeWRZ5dv7SgXHjUgDnvZdgZ3n55zh\n8bh5cp12ISRf/1OF3KMvmzeDtCVqGFLj6FU4O6YtcknonYRLed1lP1n2zZvt\n8yR/4pNmHQXuwqnLrAcw3MFibJUwfzFboC8DziSpOUF2VzR3o1iRpDxNIvjM\nQg/GWYfktJUuGdmcZdKSYuwUzzPmgLggRG56Bo7xAk6MvsX8kbrA0RxnO/Se\nOZr7kCsF6l88jy8QFUftBzXqOI1RsSpaK5X6/rl85DejAzMIPQEInO7uZ4ID\n0c5nuq9LGXfhtJ/VhDgp4AhtwbxPFBN7zcF4Xj6JmR426ZZiw4ojBHXu5P4c\nfIGg\r\n=8XhC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFryw1YVuyCJTa9MJHrc9UMCwn66s3pvAuYXqDLbwMpAAiAzCpX1rQrtBYlQGi91Ji/OjcH4FsAvhpItCt8x7lApNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.9f8337d7.0_1620153437559_0.26159401103124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.5813480a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.055d4f10a.0","@material/dom":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-button":"0.22.0-canary.5813480a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.055d4f10a.0","@material/feature-targeting":"=12.0.0-canary.055d4f10a.0","@material/rtl":"=12.0.0-canary.055d4f10a.0","@material/shape":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-htUS1aBp9hbqB4rsUcgsqx/hioNIZV5WgYviSgvYTCP5hRyzEQT8fjsTfbP7WqvbVs/kZOs03GnFaxiaYMwn/Q==","shasum":"20aef3d91e00c1b1c5367f7bd508fc15d8bf112b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":112540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMsCRA9TVsSAnZWagAADgEP/1dUKvbDed6RBZJr5Tu+\nBHsdul4DKhp1fnKocA6wfNlsfVV7n/eT6aAvxliv747xsgMv4qUTs12WQcj0\n1b+wyjcZo1arK0ihtt0YYzRlVMymQP/VYeCDp79+ntLrNBLrXEb2iKmmMq5X\nthUXrnPhT8lt6JL2i0GQn1vhdM8QBy+jlhABwmtn36o6j2dEu3bRDwDhwfVe\nwlSuY58ZYApQTnNceWBrFheyb9aXlrSn9uMKcux1u02lrqMr7CJoU5fgy5Ua\nxl5ZIhLh0UHyC9/6U+rSNGKvCV8bePgxskxqFfHLWzCQtBuW0j4xpzlMaFeY\nbUYLIUElwxo0B3oLAWBSwwqxxHHFfAflb9t4lXEQdZGrS8tzM4gZPzzeZjdm\nG0WDeoxwu7AqzzxW1wA8ckCxMLq60ZBjcV9w3z6MaHjCKiRcXfib8LR7R/s5\nf5L+oFizZjBYYER617tSeZjy1zNNuYK3Q8gxMmRVonFrPp4mkoxUq7FOSYR4\nOCxc+VH1woqQiDzoE5ZTUii//LsvlEYxKwYgpAGgUZWGkAnTw1Uk3QgGMDEM\nl3fywnmmTHGaAsGBqBxeXoznhsy4Xx09Fn+U56HOYv+rM1KurGQd2YN/lPr7\nBQvrj/krUdP1n1Mid6KziodOWbv5Bbt9TYRSsgjhyIUsmODSaBCxM/2H+IWs\ngTy7\r\n=EAKt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTjbWLl4Y0dHlw23oWO4EwKILAtVxkSyOBuLMegFm1VgIhAKG0wUieQ++mxjWDRuwjPIzEiFUOv1wG4P8fJ8hh5QMH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.5813480a.0_1620239148004_0.4622415548582297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.03f525f9f.0","@material/dom":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-button":"0.22.0-canary.ab7fc1bf.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.03f525f9f.0","@material/feature-targeting":"=12.0.0-canary.03f525f9f.0","@material/rtl":"=12.0.0-canary.03f525f9f.0","@material/shape":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aWjalLvxvuvMohoiN85Wc6PwkE8RvzLUlga+PbP0yLhRVso8sQdYJS6qUmiaMIxeGRnVYc8Dfdc/VCYPlYfe2w==","shasum":"5a28ebfd5ad010c9b2d684ffb63fa62cc4cd4aea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":112940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6XCRA9TVsSAnZWagAAC7oP/1YcJQRM38hByT8INqeR\nZZhLkCI0L3ar1dnS1rlJyvagS29xZ4JHKEAUNumLd9BGOhU6dLy0kAHrf4hh\nNP0bnLuwi7cSnJolKRyVu7tu6Gs21bUZ16S7Hh+0SpbDtidwEnKUtcYiQv9P\nmH03GGZS14+NaDRMBblB6cOUajREUeZuxd8YRTiMVB3KNYAme4zQSs3QpWNr\n9+CAODnzsBF23rS8HhcGHhxjTjt4b7tP2kTDtwGZh9hfh6wmNB9j9czPg+xL\nKLRSdfDHOeLSeAqeBtR27V7UYcl/h/TCWRVYHC9FeXF+d7ZbMPfWnrgNF1cP\nWt5uuxB1dt7A7vNTlyaXGcBpoEtjbHSqwmH8GoSsR+hFplooav6LxqhtnolK\nZkWlxj/SHG8nNi2TRceaNpRKwK6/0IOFCMr8g7S1YC7T51SZerOOUfcg9zKY\nhR6tNbfdQYA0CqrwxHfBwKco8/+9WJwc8KIo01uU7+cWGF45DqtN0kPEnuqc\n6obuWlCMYoMGPoFG0WMUcjRiMtC8//oC00DNJeWmSVpHU9XMXzM7RnfVts1Y\n0ZR62NZYr+TkZsFfQTcP9Axpyl1zlKlHhqa7ifOFgo+AI08lBY+DL2awZ+O0\nkkLFdF4JNNCO/3nguRgeAeJTGoDruq5BUifzkzzGiokdHZFklCwsZ5/LPcJr\nMVcl\r\n=xniq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjr8fQ8u5xd5O1uiuaPEj9lKDjVYIj0HpLfePIihYTlAIgb8v7JlYlKa4CzH4cltF5B8m8Mg2XBmX1d1z4dLvNtRs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.ab7fc1bf.0_1620323991412_0.2078680612795325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.25693d60.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.869d890d4.0","@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-button":"0.22.0-canary.25693d60.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oS1+cPNz4jRiQ8yslaPtfAPqPYdfSmQ/4x9J8fht5IgMUfiEcpWsgCiTJwM5551Yy6QIRR2o/6fJDhMX8pgO0w==","shasum":"ff96c1a1c1bfe1a0d8c7b95672c23b37d06d0023","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeGCRA9TVsSAnZWagAA9x4P/1RJu2zEhbG/9Ud8e+di\nAiScwVcy7D9fN6UmxlIt+ZvqKgZLs5W0yHeTQbj8o3ulN2hs8YF0rhyAD0y9\nqyM5hnCz1fd04GLdbfG7iciCJIQj1sTMiJRKAgYdV4BDNC0JF8vpuEoKxJ6y\nyXfE9EjI5JcMuQyiaGyiQ57t5RhBD2jFNO/kwAuSyDz3IfBCRvf2at+sPxAb\nnQh7QorwpmWeaN98p2d2UeZMRLevIZQklJpJ9t8/Gdd5/V5xoXT7iE5I1Z+5\n2fCQUtM3+BB20pTt6nlHnTQfU8t/itXeoRjmIC91+NdPclsV6atu3mAX4teI\n+Qv+MDZLM6S9M/um9v0K5yJ7kmFbdAIiNdWrqr/On95vmRSDfnAz1oCCzVDz\ntkSXZJ8ukEJ1m+5NCiotDI1VNYMVY4lRu98nNcWU6TNI454Go1pusrewzpWE\nXOVwhA8JRuwyKo984t+8IJ8VLUEiZhbLzENwLyO3XVT0nwdUx2T1+34q3InH\nJhWMRQ08VzRVVxCsa1Ti1WM70gtXjGlJK+xHBBiZpEp4tH2Vf0OAYDHPl1fO\nuA1y0ZjeFyziP4gU6aiRnjcEnKUFwI3NBELcjlV7OPuLeqRbAEZ6HLjcKIJk\nsXrNf7P6ZxdL7Fl1sA9raMEPfcZhqjrCDHubtxL4faWfP2aFr6PdpMYv3DeY\nWEQ+\r\n=3kaj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiozSaZkGtmXCxccgZgKnkH3qG93pncfgtvkysRnos5wIhAJeAGX8xvBrymwR8TdNCaW7zPPOcGVqyW14ubz+j+dXA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.25693d60.0_1620424581760_0.33154314394832407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.c497962b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.869d890d4.0","@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-button":"0.22.0-canary.c497962b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o4KTcyzhk3hTsyGG1qGGTHnfWx+IyPsa1iJgzoYGibwx0ebxblvnse4mMlaBl4aHcpEOD0dfx2hxAzlDuGCZyA==","shasum":"3040c6a0fbc144daad500595427d2736b1d8faa5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0iCRA9TVsSAnZWagAACpYP+gJKeN10b5NiVTCdgrMJ\nLC/4FG1voAMwyvzr3iWh3CXFyHLCk+790jSTXFhH6+pusSUYeb3nreGrPl+f\noY+6wSlkFwrgpmRAz6q1FRItJpj5mPLMkayzXRKdKjZRVApZ11Tx3LibmDBJ\nDe3Twcb5t5JGpcRaXDNnsXqgQ6ZdLWioFeJgrXF+xq2T9rqTzfELUE2L/GAY\nKbdTdcsBNLzKsfMYFaIBKhGWri5X3/MSVBv9DxvbqZmK4q6dtHSvtEdjzJr/\nfCzLjSFYcLUuKd6IFcwGMkavhXuuiZ6G7VxI6dku60g5e/GqHisCVlUIRo2r\nWwM75A8GF5yPs0wXBh9J/Wq1c1HewGPnaGsO6G+bjr6fUEX+zAxyG7t2kggO\nh+uDaKHjkn2Nwv9Mw9kH7fD46s4K3NP/GlEBYO/AC4Nnn90L0p4zEUa5c3Vr\nWNWnLzVQMmnc1p7WyOTSzmy7G3yON/lZQhBJMpusuxcVTmAhCP6NwmybtvRk\npG+SU4gfYql4Nw2CRmTQs/iLuI/zpms5UgKcFapipY93OPe733Omm751nsxt\nx6pb+/khnzZLqTIsOiGRzoQ5NZCix9yUMFzBr91pwNq0uy8xt+gzoor2YnEW\nx5tVyJbXKAszvjJUY/JhILwad+c/hNKhFeTrw7HpHxlR198ch2OfC5g2AWM2\n69un\r\n=OcOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAK3DPngUgcHSk+yn3jqc0aBSE/LrRruOZkY2pWpNWR8AiBYN80yn1PKhQLSyuhRGzbnjs9GfzLLoBYbtcP+fquC0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.c497962b.0_1620426017570_0.26818791729462776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.e300688e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.869d890d4.0","@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-button":"0.22.0-canary.e300688e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5gOAIQWomffnJBRHxqr33KvfrMOX2aBFFeG2K7WFXNW7hhL+gppLNosYljwz6e+BcEbAUq5JbkbP/cGDibYiRA==","shasum":"a5f7e0d56187e0c0e2930d10591d375331ee9b31","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4oCRA9TVsSAnZWagAAyCkP/iabdLtlXq8ZkuihRDHW\n6LIssoLAw230pNhWPkv7UJJl3rNUEEuQx0rutgQtm9fxWWcL9tTyYfY6tMzP\nAt/tB6soGxkOMj8isTyLe9hYsc47pie6xhTvCLYQcn/PoX4hgc34lwK0fDmr\nXgU51g3YPivVjftSZBoX3L1DWUt9vyeTc7TTNOxyh33HITlpCAkL7MhYdh+W\n/dIKYonFRzWEfYag7MktLYhfQhboJ1T8WukXEvw1hLo45/Hb58U7fnP+C8Vn\nO/+OU16L0jjPZojBimYzI19xgxFnljDrLsmCXbOydG1XXZVkdeYQiiMC55Yd\nGoRKKOe2NLSyHdJXkWvL/HqZP+LJo0BW5wlVOtmAntzHlz6hxQ3GAoC6Lrt1\nIy7FTKLQFXTETUCRW9JdUieoBTWBKrz01xq8KyDa4pKeemhNNyhsh+IaiaMf\nEQamKzmzA81RwIIfgR5XpcB07F0TDmUi29licdHjNqXNz//54TF8Jv29kDV+\nZibhg66T/GbQ1ThtpIoLt9JK1T8C0ZCG6VQ68q/fMYZvoPIu02a05d0DRCse\n/bj+Y+QFfLyfdhY2BWuFIfxirjIg2B89yIU0kC0B32guOnNAKC8TFQhTdHw6\nbB7E0uiXe63wr7WyDtpJQ/5karMbswkA5JEbvtfqATTXKsvSaxT4sz1z9hyZ\nvoRz\r\n=LSoh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQM/HGlLH/TqZ0bqYS2vn6viYh4i1AVpfvuBRdhbfvjAIgRQeBk3/gGdwWuTPiimL80DzaEmsDbcnTtd6VZGqhRVw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.e300688e.0_1620426280245_0.069195585978441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.d70287f2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.869d890d4.0","@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-button":"0.22.0-canary.d70287f2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zSMiYWqsET0KwKJ8o1vienJ21AMBBdLVbG6jnWNkKatAkF5wO/iVTn3yp+KaSV2XH7BIf9jYStsvWnlVHoyLPg==","shasum":"bbf9fcf7a6bb30718d95cea025f035c2585f0f05","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmhCRA9TVsSAnZWagAADT8P/162mBWRCWXCgn1AZd6U\nTiynRqTzmrI1LEpWMRCTRKe8fo1HdlW/CYcHk7ZMsgp9jgZRfshrrV43gZa2\nrFMwtaKyU6tLAwDOGtnHeY5FEujNM23WHImax3jDjuFdsbG5MSW3GGYytvvI\nH2ssZi9zNYKnqxy8ICd8ftdXQ4RbdscIBevbo81WFrD0oYhO4uNYShONQs4Z\nubsqTUVDLAR5AsUagiD/Q2TXfQWKoF4MPrbMOTONY3MCDlLcv/CiGtPqmbhT\n8SuJfCWhnHH/dW/4JbZONoEf5qOcSNTXIKpK1LXwkNgy5qNhMSwnP4sV9fIW\n6R/9o7r3N3AUK8f8fsjnUlqPFR/TBxNGeXOxUVr2cTV82rIJpLXiVjA6OaZJ\nU0Z6sUob6cRMjAaVYa2y7Q62UFlJktVitg2cNS7YfpJaVke7RP8JoTSHXnrU\nDEuWUbTlzk9pqzXLIodQvZFfdUlqqkLCEI42mRlX13pUZu9uCB9bsOuQFy0O\n/Yyh5kCrauS11FyeC0yMRwmM9L/3zNrNEDuyLWE2poHg0CvobK6vKvnYPUzu\nCo7B8+aKvMw+EVMaGzOi2q997QrW66FdxCT72JVCLN1UfqCZkR70L7fPFfXy\nxHsv39jnExo4T0TIMTS33qpSupn/nofLtf11Bj+YBKwITFBV44oIvutMuy/0\n76NP\r\n=X8iQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4+GF/KExFWRzz939wgmuiH8b5hjt8wsWQchMG59ucIAiEAtMb4vrxpiNE/eQmeEHLqkL/rMY80Nq0H9C0+qXo9chQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.d70287f2.0_1620674977499_0.33433482085173405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.02e841b2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.869d890d4.0","@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-button":"0.22.0-canary.02e841b2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.869d890d4.0","@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0+tSzZxp27r9hYPxbgfyQUdxvjU319SOxL9mQSrOOgf9tCNp2mZn94WSfJwyG71WD/E0lYQTwvhNkIVZDDY6yg==","shasum":"25b4ad7f029fc53b47e715c4def26d7ec248f041","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZj0CRA9TVsSAnZWagAAWb4P/1rauA80+mIt6qTLTgW2\nQZPTUwEJoq511SshfkRMom8h2QFrkHw22Z2YoQHDQ6CsLxInwNurtBEkR8EY\nkBcSGIa/j9YYvEMVLLB5QmZW6g3yeFGhS0FNGgL6NKorFOGjF93YnErDiVnp\nrt3R9KP1HNctt0RAJZP9SYXKa5jOk+Caz0h4hFiCna1hn1EBX0VDWx8Nu0aG\nH7nQwWUcr6WcL6Ge0lviRb/z3RvXXOIQ0ejKgmAn9xY9PhORLiAvJk5eifws\nQ3m0z6br6qCzz4DM6ZHMPLRgEYEA0OHHRikBfuJe6saTgKj+FbQ0xdafbd5M\nX+ndL9wayKGTaCbiN9AfjIVJdhN2WSIjuysZKSAW+qaslb8zaxppXMMKEWVm\n/+B4z/PqF+czK7NMAokLpF8OOmdPxJupIdTx6FbONKZy6ZCSDf4QOBIrnsJj\nZ+fCROGM6D4Tm33THt7GedhMVbUH6wUrinUrN0AxCHfpI66HqQpt9qE18vSz\nJc4Pgyk/m4OGpoUbqZB0tRES88jJ/R84NOgp5wKyajbHaHyBkqYusmoPb8up\nDLj45iOr6aJAuf1Dyh1HjQN077PEjB1efYwJ1o6fXkYBaesKeOU/07Ba6f/W\nS2N8WT8FW2PCORtzTzF0Nbz34tmQh2wVjb/JZbNA+ZF3pzPIV15kbtzgsbiJ\nc7Xt\r\n=Rgpk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn5QgFJgJsrvcgRI8YlJYT2QYM7T9S8crpgolFdXjSmgIgDE/YdgtvpdV9+FxsNEaA/gIfIdfLc8pfW2SBkYZFoQY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.02e841b2.0_1620678900425_0.6231772500563582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.badda2f0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec22e1da9.0","@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-button":"0.22.0-canary.badda2f0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jcet6zV64g/aKJ1puwPrKNNVbJETHxSnRo3E1PU2YRdazmeS/xZUijimCv3aS5ox3j9LOzxFVhVweBUG5JGmfg==","shasum":"1928b977964228d8440329a539f4fadcd08335b9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEwCRA9TVsSAnZWagAAFXsP/0Ed5ExjYjdceIZAMR38\nMSD7Itiv4qrYx8PN78SpaTJ8zGjcn5G7Hy0oHj2Qo/j86Dm9gmnlATZrxyhi\naTvKDZ0hkeYWARLFmJhdLCk+t0H0Lj2alpK27wmhrEXEc3JirBH7dXp8D41n\n27Of4D+kdfH/WskAqJqyF5RGHKaAU+g0KioMHEV9rY7aqL1vm869B6lyDu4q\n9kgsUCZAnAkJvhOW+yxi0Tx78Fuc+NP1LDhMUvtBczEMbT9zoKh+8zt3bfmc\nGrbHWDzxwDwpPuA1R1rSvkf6YfH8OUX5tK1enskonqwIcelQMVv7XokRF+ps\nacdBH9D6wgp4V5V5Tr3eKGTvrrMBTgloCYP4LrbJekKkjQhRPj+BKf29fcH7\n6phf3JS5yJlSF/bcL5jflCJ56X1wEE2nSMO8JdJ2Xet4qcMlBT8Qiuz/JfeS\nJRuy/7pOeIV0VKAnhHezndT14ofDKNiSknMAljnNkxB4U/Cd/W1WYXiFPouF\nS5MGJvE8uMmKAYFoada9BZ01z+P7+VjSUoEJRxr7tmKJeJz0qxXqgEYgX0Tq\nXme+dn82AJMxMdQ1TGJrwAswejnST8MrJmIrSrb43nAQqTIxFCfe7/AUGzb/\nksgo3x7Rc+xPYEn3qEhKuAmux7o3ARLzbw4zvI2ToiZRQQjWh6wYmK1IB1LV\nmA9f\r\n=dCmG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBr6KNWNlVGsNV459y1W7Yx08YbmyOD9Dg5Lnmu3FBjDAiAHOBiXa8UsHVf3D7GqT0A4c+8yF9h4MLM8dQr4kTYKug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.badda2f0.0_1620693295633_0.6064004386995174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.004aca62.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec22e1da9.0","@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-button":"0.22.0-canary.004aca62.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6PjH1vN+p65mXuTzICLMQwTC7p9BcM6wOWk5zt5NwSVPqlnt4HUlE04ElD+HPQ6+LJDeoeAWhzAV3S+5optegQ==","shasum":"9ec03996977522e2e3d62d8fdd6d0e4f2c8e191c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmse0CRA9TVsSAnZWagAAyNcP+wcIDdBZ2R0lluKmH41B\nIH9axszubmj0kO/wH5bHkRKg4a9LDhmpaE90LOiVK3aVHaY6G80V+7axMD3A\nWwTtiPjXIZjKMNu1jwZQk+YL3FZq2CLzUA3awMkPWqGouw6KFBi3YDFhxqgQ\nflO9c+quP1tZuD2D7HUenSxePs2liyqQrF3RrDf3d4vc66XFhw3Xx8m6ZHV3\n08pw+raYjmRaByCNRT1K0l1xL861jfwCZAp8fJjaL+f/EBHzs8yhXiR+iN/v\nSmwvSvxBMKXcFLDh1rUzxWtSfkjvVasY2UyoaAEunSjB2MNLh7Hkmzz21Gg7\na/lMINcZUHobVZtiEXM3DK9/RNmLW3ltXJd6ry8WSjYY5osOw4ficjRjQIuu\n+uxWmmuwMnCZi1zMj6scFFH2epP2simhe9cKNHX8N2Xz3uRYY0PUQCQR5pz1\nqnxRfI0YYq5SvSCRvR+g+JkQSWcg6cuA4RmFyxkCXE6M7zRJ4nSYfTLZ3m33\nvUhgCJSYbW3Cs1QKvq39U04ancDm7Ys4+umdQ8uXdpD9Q6QEUlWs8wlUcLne\nGdN9inDlie2gCrFcSit4x+OP83sl829+zkQcdqpAoJ+hDcAJZuAvpA3A4d/8\nC5CumadCqbiuJGSSSivFvmBcwI1mJVWm/yBPwZZV6jGCmMk8ucVFhSZQIJb5\nVyJE\r\n=ulT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEEPb/LNTO9kFBjHyaPVIvIqFa4wSmQ0x6PjTMA+5y8AiBLEwX3r2GKEFif/wL6bU9fR8dtLvsWgBl2BWU3VhnkkA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.004aca62.0_1620756403603_0.6768505709857164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.4af17446.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec22e1da9.0","@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-button":"0.22.0-canary.4af17446.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0IRUPVzGR6r4EkFGsJhHY2RbUA76BO8HBgq7EtbA2NrqWhvQgyAAUNcDnncZoVKBb0fRnCZ/DdBGCT4b5eF2KA==","shasum":"5e6f74473836afe9f49451cf77889e812e3a72f7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtEECRA9TVsSAnZWagAAfzIP+gNgRl37Ntb1fKHlZc09\n5TXXnfZ9mPJnOHy3Fc2YA9TNiD9D0DO7GSSE51V0ifEL9eMAQuw22nJvVlf7\n/qR2CLaMI2XW2wN9MtyakPNqr1bIYRwju9OpEF9KorVNX83q+/QBWsWtUzSh\nno1UvWfgatvy64cy249iCfGqZAdcwGbu71Ma4sp4PTv9gZuZxYZbsYg7i/nz\nrik+EA4H7d/6CQMjN9DRHlOWJBe8D0iTOE6ubhCsdrsAyotpvgfeHEzsZYKD\nTsCI3+C1+qzoTJIXsxtCiB1r1xPyhvpeVbxYtQUa41C6ddbxH77qWsjnmEcz\nKbRuGpMwJm1w8jmfbUsy5X7PLFLNbzRZxgONBVgXvcdTTPGxNBUl38X9rV6m\nU4i6Br5y52VoEx7zbcstuKmslFP7GNuph3NC6y7i/crt3gHWcDeBfxNVqu2o\nj0Xf6xCwaRjWpetUF+6zx3qv7QHFVYk4Tg+mJNtJyNuz9weN7aDBOYSKsfbr\nagJ4bLMZjGWti/DLrZssu+eIGJj/gEwbF2O+hWzd2ltZ5p2ST0+ao2Pt4BY+\nMJz0U6T45WpHo4/lrdfB1tsfK4dP3g8zkjoeeB4TNjQlP29a/B09zb+getFC\nqsGHtfmxecgggl0EEDcM++TYWQxDW6N2cPzjw3gr31USZuE9lXjA5buSrNzF\n//pD\r\n=i7+a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMabv+AIbSztUQPggpdQvoqK7pbDJDaaoH0EFa5Mjn7AiEAl9E3bwZgnedU5X+WSxxRaoQvJkryBGn+57MBI6reEJk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.4af17446.0_1620758788108_0.15066359895251513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b94d7187.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec22e1da9.0","@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-button":"0.22.0-canary.b94d7187.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jTzE3BFfibGfKXnS+pabAjH+oDxq+BKrZC42dHL7HwWq2EfIwoVej1zRZAfrvcmu3MhOfOVGSGGfkLF0MGRAiQ==","shasum":"63b1043dbad9e75cd2e6c3ae2c2aa0616e296ab6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":112938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJTCRA9TVsSAnZWagAAHtYP/3VYwfCe89kSUrC86s2R\nbMDcvuBNmBOmFIk8haGDZEUXgeIDJlWwrn4bmjO87w7/LE837EONzCI9Wrzy\nGqUN/YtZ7yMGOk+wCtxNoLTLKrhMYWI+BvV0QdjZrR4oBT1n8Gxz/ASPCeZ6\nq4ngX36He+lIoy7G6QNBu3HK5VVatHtkGTlUiOVi6USuxhQgTdETT7NmiUMd\nMkFdPuZkd1fDyMhzed70gT/IaGcprREm0GxAe9oQqsqgne4EA7/eCP1XMUbW\nyB4Hjr6fNw/U+4ZOAd7AuoEal+gxR6w3TUAKZdMk1dvHvoS/F9uNTxSV0zdy\n3yZHni7CErIO63W0xjZE9r1L9NRjaW2EPPLgDumvEFGejO43rqUprr2tTCm+\nVk5Kt8qktKpRBI8KOVo+gbt7p1sGurC95EtD0kKA/X9fnRsGGwXDwO3ndqEu\nEaiiNGZ54bD5wZswCfO4x61K2vNy5khsCMCdKVQIfannZ7oWaWF/k8MKI/QA\nT9Wx1vFY1xAWY0hD1CpgWXEifLY2X0M88aY0tZ+5xZzrUJU1Hvu1UaHAntUy\n+NzMYipUWsJf/g1CUAYKlmClHi9SmJoMwLWubYlAiKI2pYdnbX+va8ce0Ml5\nrSM8GphIuIb3SSAeLg8LwiXqbHuMFbHAIM//fiFac41v8Uvpq3wtA8Mee0t6\nlf71\r\n=h9sy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgO9UjB8teoojM+4c1fiNCQnaKZjjVGJ+P+PmD5xDPtwIgB6GA0nsz22ynbMcg74FFitLUOsPeBFS8hKwzsF/qaSs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b94d7187.0_1620759123545_0.5639523793658849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.4021b2f9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-button":"0.22.0-canary.4021b2f9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jscwIjF6JJ2pzmjEEREDrm55DDG1hRxbSwyYDzcUCYlYOFggfka7r0amtzTqM2DNeTyfXFSjDIAA88QoTOA9Bw==","shasum":"dd47e5d8b32157f99fa792966f3bff928c757a0e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAdCRA9TVsSAnZWagAAts0QAI7DLae2Hxh4pjengxe1\n2pWoEKbuUw1SqgAZdIRkVXxNNp4wphb3BTsExFpbhbZgInAkdGUkthTDixQI\nQkRofhb8ttSri3d7hzmwe3JR0h6mSqmb8qUNb0lccEbYJtOrdlGw9WUQ6W8m\n8kVaQHpKvTGroj+d82XItyipAb49MMyogFXJUK/dRkwoVJJpQGS3LXcRjL07\nNHj+feXv5nOjhxRTKQq/y8A/Z9IarnK+zjRqXXIWMlV9JUDoH0eZEsZa/nbg\nkaAoY2m4pEigFezXaoPehCvfQdhCApNEp+FdbdLpmi9NAdjcc8an76MiLBUV\ntZdWDT0HnCyZ29WADhN7fON5oPFmWm+FKgjX4H7kONW3nmdaIOuBSW+A8ljD\nBwP1rMdw2f+O0od5Vrfa4fpRdct+eq5aQPCcKlRmSpfwyhKI/zqiFwopT1TZ\ny9PeSK0m3DLyyYNu4ZWt3WyxFML2+NvDuOHxjkbFoy/ELRtjN3rEnYEKv42B\npK43xnNPxYvofyCCfXAKSoFK1vqsGYg0z2B0/SLQb7wQ8XDWoFQZuEcE8NEr\n2x8M7H9YEKANOnBx4aS/1nz560XFHhwt8N73zhM3vQ+7Yj8YLGlRGkiRdV77\nfU6dn3cv7PTwdavV7l4sZHOsPiygWps/MfmzkJzyPgfDEBP2ZdWVX9P15Ce7\nMnId\r\n=xwke\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHHZ2BQ8N34HuBcCMyFErGpzdHvfh1KQOPHaU1nIrZUwIhAL8MIJlYtrwDI8MqRXVr5tV4EpWni8HktLOBEzx+bosu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.4021b2f9.0_1620856860644_0.6965536407206021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.6a5956a3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-button":"0.22.0-canary.6a5956a3.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DncCv0thZrXhr6ShOWQXmlfFdRyZ/AcRxTra0sadPrSmDYu0Uhvd7+QL7Wkd/LgUF3UX/LzGy9BVGyQuTh4ryQ==","shasum":"5daac0e9d468a4a7677c8b8c72ff14504e0c3421","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQGCRA9TVsSAnZWagAAhngP/A8/S/t1SFBhlSsZ9btr\npcQDmbZbxeHOS9Q0A66XaAlXzDxsZhmrKIqXAgxIWELkJ7y0hQV3gCIgDK4Y\nW+bTc9p677dQ9Aoemqa8baJZUUyDmFBYhO8nKXrjlb0Zg5hhbhQFZIKTYzHN\nahUwca3K2Zm3C2cKSU/R+/3wCpBspRsvvYz+ZPWlt1rgRRlJrZG2eKC8fdWb\nUSISHolmReuyNDtANglW4uW0QSiUZcBdysn/cMyQ5KSDLLTGbYhPWCaNfJJR\nnZqHxw144Got3UPvYNYPlZz54lWpYQh3TXrAIw5E8s39zQmIqQJcf80LXrsF\nT8ThFq/jRqYWPhQPTO0pFtIr+zGOeqemQq7sODai1cIsbkXS/pM3NaKjoynA\nXCnWdyZicf3V6Q9SUE9ah5WBvvvXPlfNrnm2sVlNa2eYpCS3DSJH6UoOtbgP\nsbOcmzNuVD7jfVuGsEXhaStcYS6m7xCMcvjOupLjmpN73iI470Ej1h2xBZap\n79BQwvAsbKLcGZzEZj8XLYhLgK1MiVmUvxTlTugR02IaMyiJV4PVnFP8VDi7\nDsWWcemBYxrDGrv94xRnF/ASRO/Xhnt/FO42JU2veJSez0Tg6tqwkZnwG/Hn\n6H1uBaYaVElPPsbZrje4rgadKbNsIf/DLHGw1uq2BW8yTMAedTPZ6TP41jYy\nyVK0\r\n=Afnz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1/tWdqeV1WlxT4FKnqpzJ0mW+F0J1Wkc7VNwXjKo6wAIhANnZzfpJY1U+y5jzr7t+cyeX2FKxXULJdZqtvOVWuiTH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.6a5956a3.0_1620857862322_0.38254668308151163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-button":"0.22.0-canary.b6e8a74b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ciVV64yaLHjkP8DmT448Yss8My51vglqV9A4Ris+IJ/aBu8L8NsHMxHv7rbYcCPBI4dpWmr9+vyPslPkA0dJrg==","shasum":"6e1145fbca0ec34068d1d6e8a627296b6a0a5d74","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7SCRA9TVsSAnZWagAA0UYP/Rvu8xzdc4VUpaj6Mw2s\nIlqpiqWBIFwgTka5aPgA4Fpja9/HY6DUtIJxYXaxm0/zX9Lzxr0zcLb8+uMw\nMN3hUrTJVTbjx6cSMvZx00Q8jPik+OC9CMFM5zAnrHilXfuSio9gNiJvqTxj\nNfRBpcb8GnTocsxKoazWyK6SK1P2FKgn4mPFQ7PCtlkOvS59GYtNTNMSqRxN\neKDTko+VWvjRgAOd3k2boJzvych5AIQXf2S32IpcrGyacdZjzuyDrAvqHTCj\n/44B8CxlzSY+N4XSp27UH52mKVRiq43H8DfKULqQoqVuZrJAeKOUeMv60841\nY+ljDnVbrfhr/O5ROFUHhcHxT+RDPmXOE1Nw0vYdSNXZA0AKOgpmLTq33t0b\nFXPd+BDzlt+zuPT18o1+xc4Q2aeaOHoWomROAQAbH1SNHxYGSvTF3I+BegvF\nqQFoNt+q+2/XHeHb4QkwNk9b31w6JQgmGBs+JIQBGKVzsMZ1kl9Y7eJsLSlQ\nOVmWhDT3dfEkJd+fJCAs7A+xmLjQCRoVCzPjAXfoOjMuV3iSEBGst5nGVk+G\nAsIBahAadjpjpkzfMCD/HtslzxYd6qrFvkwwFOU0ZKVeIAuWcshSf8nDaQnq\nysuM+d3q2Ic8lfFPRqUS++/m7aXbKHCs0iKtkJidlQ+Hc2pzwvYkDpScKTMt\nWCN5\r\n=TmMs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFb/OOsj9PdE7i7JM3Eod0VdqjHAewkF8n96g/1o4iFsAiAU3AxOkbsB2Cdtdz3MYZ8BdZDX+0Vi5SsX4a+Pwx6+Jg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b6e8a74b.0_1620860626341_0.24877847844693535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.c94e1030.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-button":"0.22.0-canary.c94e1030.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Gsg+BJFCKqvmaMsWwsP0FVre9FL4eZpGf/jDdDZi0rODtRYEp7HjoyT0OWzpNjAg6Y6F9uGopHoAzmqIUf68Wg==","shasum":"e0563a5741e6c8713d340e0776e7b02a669a558e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAtCRA9TVsSAnZWagAA/nsP/106z1uMriuxt/SDRGfv\n2GicdFi4FgAvua8mv81VqXFF0COydRpRebXTC9qWDTFA3DARVJb2s5+PP09Z\nJWZoLL7ObALHQoTqfvBbubGvRCrWJRk6yW2durxsyJS1LJBfx+mH4pWdqNg+\nIX0P1PXyn/gu4mAKt7quSkYAmZ6RPOlYT3OliFpBa/Pqd86sAtdcpdaFw9nI\nk4hf93fU3/rt4FTYL7GT5jlUrqPjwEZquspIS14OFAiskrgXhem5vPwFKI6U\nF+Kp9F7/ISeSuHkiw0NwWs3gwInDVcpcqfGy76KLzLPZXXrp/dEixLQB4Sau\n2kebyMgEab3HbCzwe/K+2Jw4/A7bMfSUL3mzw0s43onFGMPBrVkoStJqumd5\nA2PpQQFCx1oiuHLFwcqviadkPuLoOUg3lXhViaGV5P1u98JMXsTumblLlXr1\nFxliFNuTr8G4qSKmYFLhSpMifpW6jkkz96tDWumY5PYVHxHLns11csh5Yphz\nnQK8tPVudRKEN5SrasEOruYX3lQlxOHVBZGBYufBpAZQN6qFR7/r7ThKoQZn\nCn+rIec5DfX7jao0CWHI/c+YYIsV3OerA2jiHIH1+ygUDulnKpSeBxgdVv5W\nyTHEx+arXJ+oWV89TZcniLjjSW8XEHpOWApCaEAtb8tpTskC1DcQxqYMnfAl\nkyyl\r\n=hmQk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHukqxFrDE91nxWUVDgzMIBkLi6rOFqvI9+FtpV0WiYKAiEA7MqG+TENAZHInGJUMokIyFG7uXYWInhPaUMSa/Y+dSM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.c94e1030.0_1620860972850_0.283649445820658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.40a34e35.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-button":"0.22.0-canary.40a34e35.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RA8QmATNA17Hc64j3999FkpenRMJ06lXGGzVEj3SA1T7UVVljk84MMjT6hPTejC/EV2YTLRvtIk4xfgUuwJ9Jw==","shasum":"c89aee86922397c1a34ab1e7007f73e2e11a82c9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGu3CRA9TVsSAnZWagAAh+AP/2zJHy5Nfv1CYqYx6o7m\ncNmiN5AbFBlsJsu7KRkbmd2RvZeEidCE1LV3g0zb1+2T9n2AUHuMKvxIDVIW\nCiWgITVwjCGwSvmgRsnaOZ1aPWYGXBfcQHaw2S9zamcSMdpyO028kkkFHufA\n31PxMdOyKHjIBYLn+Idl1+OVyuG925qGrWqH6h6xQw++C7NRuRpf5hdGn4T1\ngka7wV+ENrx0r1sXXY8MagIs27RWrw+NxTdpilnxhZZCzzvZqXw6umTSvMpI\ncUd8px0mKXQ3HRcimSqhAeRO4jCtA9s4EsCvLIgtYgJvSVaMAuuYAJzBFnHy\nkfW7SwKIoSCuvKkuQ3PN0nTt3MzK5A/T41Pkkm8BM0ieG2mgMyOq5dXjoL5E\nlBMpdq7sg7eC2P+6fglAu6nVaeLMa1yFSydIbPUSboUGdlCOQh3RX7G9XCW8\n9B9wvETZTdFknj3H5t5NZD1lLuQisxantrBBTPdEBrRx1dfcFw0VBW/LfL01\nx9qZ1SkqwoxANI8OLHspvKN1jHumpFdPnmnYq/5yLeKCWN97p41q5IUQShh7\nagziDyYoN8G3tdDJ8apVlrmkOkQ1NjEFXjpZpRociDQW1DhuS0arzEuAfne/\ng5ZSx7KiWa4MbBPwVx4F7s0LbalIdKSGCn2tvypempXvClCeUrpqgcqKh4Hj\nsDu3\r\n=LysD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFANOo5/IWOBIAm3v92l2bk9a2D+7bfdrUB96f1oCs5bAiEA12Sb7wxyOvefCZD7UoPjbpRKC4Oxds1MVVjn/7PfFcM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.40a34e35.0_1620863927137_0.7762125739346688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.1be14d2c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.a23ecb682.0","@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-button":"0.22.0-canary.1be14d2c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EuOGB9KLaOSdVwLwHWaYj0Em8Q8Zw2cJy5d03L48ncxd4EHmMrDyNnapQb7gEokivp15UYOl5chAzBn3020oPA==","shasum":"f7869cd26170ef3b5b49a340c04b1d2e202cf832","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbXCRA9TVsSAnZWagAAzLEP/AwCcJJqhL39RfxVhB3N\n3SkxFTlgwYSActbauDM/CJKgExOluMBEdf4U9pos/B/s4hZ0etORzFvoHWcT\nI14IYP5dDCvOiVzGQffFhTw7yjfvfnu3prg7sm8uagUVojHDXFBJ3k1rmRLp\n7RNhbxBFvayUqH78ifJpiyzQeDnHQFEEO33R9ikLLc/vbtwY2IEc9Uhqd27m\n/Ks7h+3f/56fAJNaR+xlLNBM9SP5A3W/58fVMedcEXg3amo5sjbEIdV+s8BV\nnrIimE22Ahpx0mWjCtE/hvYi2F82VlV/HNed5j80rjtboawM1l85VXrYZM6t\np2c+7FW7K7chzbQoU+r2eiIxyrRsphTO0Wb/XkhunGH72/EMwNWuXLunDRrs\n09EuCWMNIK9anuYOpZ654kOSHipbQiEXwueQ8sfQz4vlR2VBMiFrxCoyFxQ5\nJokfOYlaw4/fuELQddnjTzCMnGlXTRtFPE+Fcv4AniF/9KmXzSywAFSgI/AL\n8FJvZNAHiE90R6g10/igSz6y4UY3NAVMWB+1Q2n0p50Mg7BMqedv/+QCw4cB\ngdqhSBCpUuY+0NYobR9NeLufKa7bE7eEJjwWHhMO+6m4Dm8VUhutvMngrJXb\nLsgiyysRsfgjXHA8xo8galvuhVt3n6i/4drdNMqAl/t9TKe2Aoxy88k/tOQ9\niDW4\r\n=4+or\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcDEMz8eYNLNaY/K1g4PGRD9X+A/nmwlEwWVCTapOnAwIgZgOkvhFZmYLUwmY3rczMZdVa14fj+bEbn6nLW+Mw1jQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.1be14d2c.0_1620928214591_0.2987929730860255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.87dbd64f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.1a8d06483.0","@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-button":"0.22.0-canary.87dbd64f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kiaMiwm0frSalAD6LFApR/NPteoK/iUQ4k5T1WwRs0MsXMp/Svpxwvr/sz2I00NsxWG8Ct282aM7gaOgnOq1qw==","shasum":"1adf3d026846f44f13e0a3242dd3531c67c87d0e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":112958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSMCRA9TVsSAnZWagAAW5EP/2dxmFR7WSeKCxmvQYXY\nRzIg8fVILZsCbmhwWd91vJJrSBwj1rBshbi/E8PrCemN7ezowwGI9Ofh3nv7\nsF1ebs3sUQ1KXu/7othadlGVN3XYNkgnO4ixgpwMCKwocGbQuwD6Jcr0nuC8\nLOipNTbyNx31EGViXSJ/N60cROewumw5fdLLnq1NPHYYY8211e8cD0/hasJ/\nRCWNiceGZB60lpETUmSkoGaLfnHfHD3Bz4b2BS2Jw5OFq0RJcMdHn24mvNB2\nb+MW8oIfuEtjkHTPja/B6nxab+tWbcHmB5lhTqHD4Krp8ohjGAYAoFJ7J1x2\n5QRLKVNPRGC9HhdAWCVmO7ZgOeFWJBwQ9iLUqvRJcEgid1D6tLqy5YE/YeNz\nLHxX1z4/9Nc8cPIb6KBgjR7l86AO+jFmWXAxYShKMBGzmYrq3sQ1vXV93JMc\n5Kojv1Jzcgt3DP+B1euC5IH9yS19Ej2wWWqvzDDA6WKp+8Xb+JyESus3tYvO\nvzcXJWu50iddB+VamsrORq8jHpsyS0QcJuzf2iVgrkYrv/dYl8f43YfddRcG\nYwUbnXit8hv1au9qAk+I4rLnUT8JAl9BGpVAXCzkBObHz8gbfraXSx3tQwy2\nsMISQYDRBYao0PXGN1cootSdx/BhlsG5baVNvxr/IvFrmklMeyEtIKTwhj8J\nKWtJ\r\n=KFCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7AODFl4ZXmi5a2OrnAGh1b38RERwW4wdWFiYD/HuaIAiB2ruX8MYgCecNWFhW/qv8hU8TQW1P1WdKTqP1f9ANPhQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.87dbd64f.0_1621025931932_0.7855616258189522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.c452e4da.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.1a8d06483.0","@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-button":"0.22.0-canary.c452e4da.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tw90ym8TpLup540gAIidKLpABa2Pkx69k8IMxkHYJl53AGYNVl9cR454+bDce910mLMI3MbqutsYv8nb75B3qA==","shasum":"f70ff794a462900d70ffaf81cfa1aa32009c06b2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":139637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0LCRA9TVsSAnZWagAAFg4QAJLZMzTErU1gH++plssF\n1ce9oq0wyljs7ZsmeRrLM+l4pAJt2jNulG+uf6jIn/M/gALV9wcTUdcSDN+t\nFcSYrKoQoi2reVY7/DTXwSdg621D1zQ3zxtv/RZx23L9piWVGAQmw4qJR6Gf\nfEYw9/8WqHCUtOEEauLbgtPS1WYidaLfY/TBPihawCS5TE0g4fxj6pO1voMi\nTLSdTT10lUhiILzXdxp0pHe+8ZxP4zu22oKyVBmwd4EhUNRXrwBIFcw++4uL\nMdWEL2WMIniS6SRBxHEyFDnEDR0aeoNyydaJSg4RxG/9g0aZgmTHWC+3RGv0\nuYMH/JsfyuD/brkae8Gq2hqv7gukpe9hT7D9G8n8Xbx2zcpXlgxSVdeaTv+M\n1K0CWxcsE2kxO8blY+6LIEzDY8/UZpTWyhO5tjuRh66fC70W7WqtGjuRCL6q\nO3tgaxOZNyRVOf5LFRnGnhXH9qZLaHVlUZGcmhNlME84HltAssROJCKr7j4U\nxFSmYdwnaJvUlt0BNJPU8alFi8XFdmp1m7FpbSssIIpY/LLCCfoyK26WKrPs\nKd3jjYuwuZaG1csCBEGeV+LNwLOLYcSmWOJ9sBqoy6ljvS2phcMiLRnE8VI4\n+vr480bc1/1Yv+jFhaQCIb5i/kbAdVqydhcHzomtyfShnT8FsHXGRHU5+Pq4\n4QAx\r\n=0tP3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPwg1x1gxvzwi0x19UwzskZsNE4LlKyDBDbCgCstJJ4AiAPpCxP4OWENyDKbBGhNacU1d51NtVvJjYULXLSYOoMrw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.c452e4da.0_1621294346937_0.42293598986112424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.2212691a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.1a8d06483.0","@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-button":"0.22.0-canary.2212691a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1t7eIZy5bL+uP0t4IMFuTuuroVoc5qkzfyNcckYMTgkxg/7KMiIGQhjSgNZuw14sB6SunEM2KdGiEAfu8kuQmg==","shasum":"585dd84734d084168841006110b40d673895fa0d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":136579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHdCRA9TVsSAnZWagAAuaMP/2QzKlheav0MmoPPxH38\n7tqOB/ZJv/gxfMDEuqEM/UlnEnSd7BnRlSEculZYy9tugGC/Wbo3qGoC4gKg\nRPOcEHfmke3PkBM/f3YJ1BRwoXujTQkc37e9nZg/3W93I4IYtzzkVQ3s3lJs\niSptgpltUYfREZBc/IVlwTtTHtwdr7D3qGZVy/sEGT1IwUQxuxcACJvbtAk5\nBjpKJEXciVYXqz6j2poQSUiXF2W9Gi5rd/KnUSllL2AQesLNfMwDKbvah5Az\nicHvuuq94SLoCb5bejKT6ZOXAzrRbJ0Hf4e8BuisfL/LAa1wtYLL9jyrkquc\nMjW/XRMB8x4kMJSlzInzaXCSgPcLwtCvqjc0w3buOqZ9MTxCA3azKnw040tm\ntrcx9yCtzYc0QN4VUaxQgpNQLtPrn/7FXey0uKZ8HUjdT8STVbCZjiatdimv\nuJp3oKfUD3nW3wIeVjjsd63xRnpfemy0OMLxrKJAYU/yb0Rc2m2QIgjTe+eM\nHhB44/QrqbnzECNV7h0Nu8oq42r6HfzRAo/+xPT7y8XD1HLPMGI/G4dy+1U6\nMs5sMq4OxCbABl+ofKWRsijuvEUAO94OcwPGRdEnkYRkU1oHg5bBro6XAds5\nmenJxXuZjKLG7cddZMI/60an9KfQtlgBuDH/xOzy/V+H3hrUlw+czBxEYUV/\nAyWg\r\n=bW20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIN7/vppE1vqAecju+cINE9LLQgA5TROvzc9eZIWxkYgIged1ns/NedFMezaKXt9OsXe6pismC30pW2Ov1fV0mvUg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.2212691a.0_1621295581329_0.5680732602994443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.f748ff2f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.1a8d06483.0","@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-button":"0.22.0-canary.f748ff2f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T///KCf+GIubYXRRii751fKduBPoqUO8tJGQOOP0x3h9Sm32WTq9NF98yR+tB9I80K/QaEyxVCpaqwEq9lJTDg==","shasum":"e5077420c2edc89afb559f8d7c85d86c0781c915","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":136583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjcCRA9TVsSAnZWagAA8qwQAJs6YlKG6MqTil2QrWNY\nrSBeaq+IP8co7aB9GXFZtdkXUv14pHqC/8x6SonwWHG9wvZOqyoLSmChsuu0\nE4cSCf8Uzkdl4EuSnyy7jzGfLDXbB7SCSNPKLrOFfe5kY/Y+g7leE2FzXfJW\nh2NYX3RrIA2TtoN3TCGxFcH9PGrAHfoXNgs7pw4Yu0PmzAxV8efhHAffA/3V\nuIw/1lruSGJzNjChsUf8FjZZ552ZnsAQwd1EEEB5JnNWCRorYrt1A6iOJ1qN\n0QVjG+bIvhxi5na7bcXP2Hjtj39ik/MpOsfgTP6zi/2hCUIl5SuFiRNdqjg4\nU1PNyy73+gyupeIUQeIfZaGRyuAd+Nfa2Eq3+2aEAHODa0ySwNNhW6Ov64fr\nHqnUPFmygkPU0d5tw/k2kEbSly4aQhDbwQRTzI+6CLL0KDO5i7ShFy1dYUdP\nUpyxOzt8jIYIDywjiSA0Fq87qglLB41rHvhx/WEpDr7bYFic1ZSPnmYNaJNm\ns3533SSyrSM5PrVubrm6x3ZcAuU8zi8q9jw4LIys9uJlp1CP0raQycdF0rcH\nSQfI7giYpRbbFg6N8BtYVhky/I4SnkMBnCkqnU0YpkXuMAofkR6NR58ps9QO\nUlo6xgNhrHQrOkqzBkA9bq+0I3das+nGjcVOkZCmcEQyGRU+1chD+POqNaic\neqeV\r\n=DS7h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC37p6p10R15bmSu7uqIHXbR09tHUbVoaGH37TWIyP8DAIgOzEexvB6k/uPxulDdJzihF0x+DAmgOFGMLdY9QGQTNE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.f748ff2f.0_1621297372457_0.8520545471849896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.cc04657a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.1a8d06483.0","@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-button":"0.22.0-canary.cc04657a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qcMVcrJxEzgswiP34WPPtR484d2G7YfViVxVUrmAupsIlKqCLn7jYf6OlE/NmX0d65XIdo+WQEt1Qprui6wQiA==","shasum":"d817a733149893cb4c0d1d1ea563e7c65d360af1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaQCRA9TVsSAnZWagAAFt0QAIl3+j++dnUl6H0Sb6jt\nwnoz51IbLWnOhud4qEMqhTNo0ZURaC6A+OAdydKoORf8F6dLv+vtNdGp3Hz5\nAPk8kLnCG+vOr/VHYwUvujg7pt1+/vKXA6MwRGkn3iSwuFPC29RUih0rx6z+\nuf/jEKLe2AH7TMXiLovcEzi+xHqi/M0Ze1Ji6MvmoIbyDbXXRHOZ4YwiqCL/\ntQu/iWBxVkhz1t6tLtuv5mjORAOVpepWRl4/d/S70JNyoOZviPwGzywOpf64\nEHSZtMTRowfxKOCCWLlYvGFpklQXkah7kET4u0qsnpmOGuGr9ygqEFgMhlnH\nfyUaSsJtQZ0A+1D1RsCXJLHLFA4St/kQIGwq0KsaLkbkWQnkud3ihIJUjNx7\n6eLb5KFpU+9JsUDnRJs5rmHuzZhZm36ovwE+JT09qHU0ZETtfngd2kLJZ8CG\nORMfwrNGz4Z4/8rviw+HuTPbkj4oMhsHr8gT6p1d+9aZpxRYPpiDVm/B7dkC\nyIJBrBo+qQB35rA8c3uUoCdyXvbOBR9uNXdkhEYoQJvk7o4qvVNy1PA/ypb4\nrGmEjs9QsB+VTaRDeLeB6W1ZClvDRXek59kmN1NCjZ7Mg7oC1O9cFzX0gi9L\n4iPOLbJRHeBwXRp2Zqf59p6w8lMJ8JXXi5MJ3ed0K80lKsCMMR4XTTD1tzeI\nZ3HQ\r\n=gP3f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjh4ASD7F4EFi9pLke4VNlPbunBa3U4fKrG/UBWVO7sAiEA7LjV3KS1YBrFC/xlpj2fSGACfb4asF+15XA82TgKaGE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.cc04657a.0_1621300880269_0.22309754200946164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.3a3114fa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-button":"0.22.0-canary.3a3114fa.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g94jVmbO/KGr8UOpr7XQgbSg3igoNj8GKOE5xHu/vvesbua+hAGbXjDv6d3rgcyEeJnKgs0hWmM5KtUHgSfszg==","shasum":"938e5dc06797f23224cd2abb2bb3a5a87da18da3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaH3CRA9TVsSAnZWagAAKs0QAI+YBhPVmKaRdMvuLigR\nqbpbLR+h9pTtOR/VHbn8hmmLWc/48mhXvdptT/4fhR/CSdgz38u+t+PPct1h\nHafPBJ9r3IfwigQv616+ZFOn2rZnwop9gUlcufM7lEvHAypGzI8EqcyBvvzW\nuR9AnfilaFWUPCMvvsu2uBtsZMr/s7AHZ0dpYBFCr9HTRo/t4msH5+Vi2yk3\nWpL7D5zQjK1IlbB55UU/Wi35Fw+UcgPyyJ5TOSbp4hVZquRtFsKa9qxPgW5M\nMEl7sepUzj5wCh0HARGBte7/pqR8CUK/2kJU3hYOHcFI0RSmlHOTDF81nqTR\nZbtODTOm4TDvSE+9YV/orzGIND81RINS4C5UFd51xAV+QOnKEL5B72LEEkC7\nxDnh/e9hXYMku3mdmJQ/w8DZmPo0uCvQRMS4dQ4NF/j5wWivRa/qOtsIs+IW\n0IR5vSEryrLp00KxjpklwhbzSiqBUzohGP5Q09q/chis/baVUKEuBQJTkhLW\nMtqhx7esnV7OSh4tGZpx7z8VpXTMU17naPxkc6KHueVLeEpV0MqHHIX8XSC3\n6TJcDF73QLv8wXOnG2Ik9c63nv9+/PReaoT0tasSqe0xZY8snwPe2GerTzRb\n1DTvyxBty+ZS5vzdNbUA9azA+1KKoag44rBh9GDCwEgEjdD8yOHXgToTooM+\nn5Hz\r\n=kPkV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdPW0NZRW5W+d4VgLWiOu4C+n5wsb6OIaHBNK8YAGGYAiA6pleS5fiNTDNilGfSdLKavDqWWJq9TsU+HEYsitEckA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.3a3114fa.0_1621467638801_0.10429962912829516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b46bdf83.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-button":"0.22.0-canary.b46bdf83.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BsNJa0flOeoWzmk36tvqH2k1NGH21WBiw+UlpTKWigHz/5/dOtx1i6tFhPRlgaLqfeeBbM13tXsGRnawVqVMzQ==","shasum":"f3f09811445d51b2811f4899968922d20435a8f2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCcCRA9TVsSAnZWagAA53gP/j64txqPWmgA6vkTSOsy\nWlzHTxUd/J7onWVHPnREwZWtsPI47ZFvtMTq+ZhOs/4IDPy+oqgNbW2DNaTk\nefIRQUVP3BHMVy1K4WDgqyrTM/NBDrVDsqJCetOcR2BBKYBV0jRhAUNDiLIo\nkAMyAnimmUn2HxUUXvWqDDKxLud9PLBbV2/epGPEXOcj2vEsTEciy4YERB85\nAFjPcFLykB+1aoh5izS8yb5dGro1YYrkkAQiEDdKc6DA9DqUWccRFKERbOL2\ndKZY9ZZuu3aVQtLDJDGOdHrZbxxQICjGKyrKJWHf9j3CFPAVB5FyzoMpm8PG\n5ZL0hY8tgQuErQ1sWitXNH0szq+kI/J1LwJF4OA+Xwtxehh817nfQRrYne3Z\nCNeQ0MCxzluiEGo8o/OT6vYAKkFZ/8Sc3CLV3L6BORczcXNqYaQhukUksxZv\nM5xANKkqf7CVWYR6UYMTKKOITKX5DCCJRSQoAFmhp2IDq6dU7G/eASQjz+JX\nXdmqU64T0OeQwgj1R/p2Fg1u8M5VgPk5FqL3qj5Lj0+PmWx31x2P+6fzylx/\nWPRwY7FR29L89qNcFPHAcn1XbJn/uj4Z2Sz22DswLEJ3wLoCFWYRwNXwNK4i\n69ObYLRseeVPzB9IsCL3NPkBmQlw1uhK2MN/iJA+DOtYBeixODQX0cCxGO4C\nT+6l\r\n=6c1N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJU9gn3OBJgWy96a5QhvHdKy8W1R+pckQKiW7MUm9KeAiEAlemifLg4U2tmGAi0D58BqxhJeUBqEU2DL5JyzVkQMa8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b46bdf83.0_1621475484204_0.42402373317063824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b401a081.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-button":"0.22.0-canary.b401a081.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XYxJD/a/z6sWRiYllChSVTn1ZgPMpq7ZBeGX8t5004c1bZyx8OpnC2J0u373knfYv5sy5EmeK5veBeCotEeMiQ==","shasum":"db20061ff9be41c77ff9278f31bef6b4dba6c22c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDrCRA9TVsSAnZWagAARvcP/jXwR5zzCB/g2yhA3w7i\nSK6404SVVstvfoEBZZO/lJIhzTcd41IcL4Kz0n13XFiTGkjAynPgDBWElAqa\nEo1HBrjL9Ip9P8yh95+p/DL0ZBKI4RzxZ00KD6xKcAlDZssqD0h5iOV0uN5U\n/tT92uS8a4lM8dIGlMlyeV49NrhxrX0u5ugwp/uxtSwFE4Q53KJRRLofNzj7\nDx53HAt2UISMeLKQktC5jtAnL9L8s12s+bHMcAK56V27toi+Pvtx3UtAEHaM\nhCo7hiorDF5dTAjiVA+CgPtSCob6m7e1JxudXmwxNro0ZAMyxE6XbcUr10OY\nrecmnH0PXg19nI5fruoytDEGntnyWaGrfsIngMuBj5HBMOgav8xRboPHmJ+6\nDN7eKDAn54BAYCfY7hn0mbo3dyDWEVtR1Y2yTxJEfzT9qtCAaIiePKcZ+GZb\noME24JcrBX2MVbpM2AhKeN04jnSdG3yL9TQUfsFa4Czy8TfWPqgVrWSkFlMm\nkjqwJq4opxxzcmzg/EdEm/rSb0TAR0CfxPM4aiEb/5x/kbFQDqF0GXAdBQa2\nkhzvb+XiLHKUzWiQG9qbc07OnvyREZGmCfHHdOk/KQvMkgoYL90q18HkmSaZ\nWCcQCavUo0IdiuFHAksVWlZgwR/aiU9lGeP0llGzc08ZnRojxrcNfiT0/8bm\nS33L\r\n=LnU/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYQ6UjDsuifJNob7ehf3Py0KQha8wwlnt/gBjU4VvBgAIhAMqcSDrT5RdMgMoyeQ9h9E3Mb5YDK2yWymFg200QaMK4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b401a081.0_1621639402993_0.6437216991106838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.012c8dc0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-button":"0.22.0-canary.012c8dc0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8RctkKOP2nsWqxj6vNYyn1UuBkzg7jG4OOHEpqSKCoC6wmfQvusU3c4/b0gbSvSGUCCEaRFIwUMYdrZbIIRCog==","shasum":"dd2aab8658809cafad65651a772a537748eb26fa","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1zCRA9TVsSAnZWagAAq+kP/jgrtx3gY67lKDhq7Sq7\nt+nFzFgjAETxNOdp8CNtszFrWsjeJ8vwcYiLocyYqCdzZY6Ky/0YSri0zCM8\n0OMLBf/STujTGLiBFXNxCa6oUk6v7HMfhBzF5JQHT6C5DjR2qiD0uZCZwZcv\noXwLwNXnoruPWnPyKmCpr/pvfgKqCjn6NSR3+GWMu/NC1oxTAdO7GkHRZWN2\nDJ/WOHGRKYTZqWG9qVx1Ds/Gh1MRW801YrsZ4ms+t/oMv8K9RZR6I9Q8u1wp\n1k+vShfX8A0NjZdFmUoB7Ee7uAEL7EKo2CaZ3F5+7SQCdKG82/s8Ls53fAiX\nbzO/7+Gn1NQ8xl/OzpUfuhWwtzISNPAw6sSMuRPgeElOS0K7q9PYnz//mf7D\nm28Ue4IzEQAKWXmPlbOCrBD8gUCe+oMhoHaN815E3ED4agvcMx90GcH5A5n9\ndtO8YiUuvOjLFwcnaUHRpDfzPlcgbwXh+VqJeLZ0AcSW1T5R13xDIEEPQOpq\nFKALdMZgTwM4pZS6F5JszFhiVItJYwTeKbq/IzoqY0FHN7zkk694xobh7api\nNeYEYAfoQfPUh7HW2IwRttZ6g7fOCfQgOXOx2EgdaVpfYwHUb0k638miXnlL\n2kzIPNLHVfJ4HvIlL14TuwRh5VdTjViGUbzoKQFCtUr2hZJPEFxJc8TKs71d\nnm15\r\n=06GU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf7vn4wR1eh8Yv15L9+yjJqB3Ftt5giWOXGpzTCoX6JQIgHGVFOqvQHMS01XV9vrzPWmg5leeiiCc4Tpa99KH1JXM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.012c8dc0.0_1621642610864_0.7387696042348846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.e01a1731.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-button":"0.22.0-canary.e01a1731.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UUUVvqNmWkb72AhJ2K6OBmz4PWLbrv0fckAKgphpvJQjuITRvle2gYgBiUlGh8H2gw4b7wFN7MTL+e1BLTK+0g==","shasum":"613b695c1e8440f283d53e52423f249df7caf1e7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84/CRA9TVsSAnZWagAAVi0P/12lLlgPDP1bAFVGvPx8\nTLISLW0rhGiOWFzc8CG6QdxsKkFjwm8cyVcWwjEDYgw+tQzYAoUQsxLk0Dn+\nuU2fuZjqd9Eh5XAUY1FGzgKe2TrX9rsimMswnTCMIgOxBiv2bgkEw4hmmoiy\nkE+AdQJyU1uTuBBx9sHk+vta4MSGocvoYJgClE7N7IjKebnRfwV59zGoJpmX\nSNvtyit9RBc/owuyiqwJGr0X3sGKgx+t1piBYgKXd8FnxVJmjdLjbY3QG+MN\njJQ6vh3X5hYmjssfDtLHKZHCAEE8/r4o1ETkmOICcyGnVWuGEtUMDXua4Qq9\n2NIjfdr+cmG9HcOPhD7EkSKjiIgtC08d7jjsp/qU6xtFJtqUYMvWZcRludkS\n2dvfEhQ20UL2Hl1Gv3CZ7MO36u0uEXbkyA5m5O6tkACtVk170aA5IiWn5TW7\nvVV8O4i9rVJOcGzpdgAnnQXNOkOkLImX54rte7fM6h3+3Fv1Nqlwgo4HqNUK\nQ3r4XqyR8KdVrQM+jEe3SdWgMPMxWiRJN/mndB63hK6JtfaHeET6rq/5XnvY\n6xF8kIW4jRaD24881w40M0jPI9n9w45YlWmExCXzVfYbhYGL4N1tDLBYmkOp\nD1SyediMqFEP+rZIsWTQ2L3MXz4N7trPZyuQCrp/sydzlqBY3RAV5lJfnH3I\nyjdF\r\n=rybi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgaqXSCi7BzeIzLIs/dDMhzoOPtTv7O4M6g1dWYX3drQIgfZm52M6GBwETb6WcqWYlYGWEYl827BzvcBwO8BL1qcA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.e01a1731.0_1621872190776_0.9315463530993748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.59174b9f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-button":"0.22.0-canary.59174b9f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JFPYfQp+2zspo0nZwOCW2k8GiCZvp+35CActj0CJFPkzYLxEvI5hCGDWWhcJ4RausLSvTBINJzT94+WhIcVdNQ==","shasum":"1317ea630457d9875e753827509ad3b11474f473","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTvACRA9TVsSAnZWagAA02EP/ivsSoxiTxENtTYQVOAX\nH20hCOPwztYgP+FsXBBcWCavwVXi7R83uhlu8ELqjhmn9SOBsdXj5CLyZKgF\nb0xHJge4/TZrA2CGuYJeV7kLYt5SOvNj5ySl3I3EyC2pwxYlqcSsERSltYcd\nyeCdDqZrd+r9PtRm75y3jyPhbse3v5wGvnKA8bYuvKdGrvmL8/3FrGLT1alI\nyOZ9c6CCdQHrT/IavHO0glKsVSXmEhZ+jCMQ8drXjGuaKjVb5UPdWFjz8hXD\nKNak4MjAxa6ppSR3GID32S3eLqNIskbf2fNeRefUGWIExpzbhDD/qXagM2qF\nMWeN/P3lfIF05Dr58v2Pbl2CuQ8BqSScWWetD1MlmQN7YwqbKHV1PdN/DakQ\nx9zJvIORzgoNzoU09WqP5etLIM1UMzbeq8idR9Q8wYphTU012HWwWkAumEHd\nqHdeVqGXQQIntQBxIzvFZyxoXZ7MN/gqVgaGgFvP45QyF7b4idJHhPxe/9Ni\nBapJPWQevY99Kj9aK6kLkh+00D0nHBkq2IbGgV+i+WLqFf6581a8PYR3xbQj\nqzCKehRAkVWmb5/pQ2OjnivKGCU5aQ79DYhrlbMgafEghmGHbajOHwqQ+/xe\nCh7yE6w36fSI8hrnv+qLC/0BMNYFwJLyWJXr6Dcs6fv9cfCSRq4u3BtG+rhz\nI4Tm\r\n=0L7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXc9fR5XLxfv1JIEpvv+L6LNux6sojeVEoBAHC8AnEhgIhAL7Cy3XwCj71XbfNZZcXU1AmKipS0kuV/l9VLLxkcvv7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.59174b9f.0_1621965759653_0.9372499468877455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-button":"0.22.0-canary.c96cb2e0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ju7jIWo1cEJJzOruolwZaHlJ2pnSvGAfv/GvQMon6K74ncHbHFggdH6vPMBsy58QQWDzwbAUIl/1hhPuFighXQ==","shasum":"646da59779ffa0192e0c77e25fb5faecbe602ecf","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwuCRA9TVsSAnZWagAAgGEP/iZDs+/JTr/GQzkrHV1N\nK/kNR9jof8fhu5WJKi+3OCRS2S0R5DcDfiFeCZquhVdvJaaP32+JpCWthcva\nLKNd0hU4FQZZC+Aqm5ivN1m+pd0PjSWOildxMh9t7r2/W52/mN4CtyOsO1Y7\nGKIGi6I0ZXzpdYM5iXTeXk1tjRMOf5eM8MYpaFnQoGJGbTCMm87ErQnUr0Yg\npQc0fa6pnqJTo8Asl4Y4/IU340RSQRvVaRBeuwhwvbpixooLcWUnJE8FWbyY\nclkiraVVhxf9nIDM3/9+9cEaHeATwm62xFB1kYNV9pHeS7xWk0uK5SitvMd2\nmQThm4Tk/aMn5oOZ2aoXfTvIPQOH+wLyS9mBU12uN5ERTfV7EBWgOqFA3LkS\njx4EdjH6yXThv+Oe47wSYQeGsToFizRsxgd2dV0FICii0EINO8KbCFfaNg/o\n1gOXvCY3fKjgHxfyQwUkMdjzqQ9qhOuYxlfSf6/ndTKslxpY9B8rsGDiqk7L\nR+QTR/Fp7CwT0FFA8dUTVsfA4S5bNkX+WCmsOAYxjLEq422PYepVTNXB3hSn\nn+cBFwC/dajwvLawkZSNit+IBnxi6huWyBRJjZ7JqQFj7AtVdlXw9sqYZUg2\ntxA1jiIHG+Vnn0/BH6sOti4DJqq+r6zry2FozUMUfDz3KM3Du+iRVRlIIzdq\njDCE\r\n=nYrC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOZORM/j9ksGsxPzBwyK5UYza6Y0BC8hgs2sQn/luKsQIgd8iT9v4YYHvs2YzX4+vLqJ78NJRzdSaBjTd9PhBcrmU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.c96cb2e0.0_1621969965659_0.32172293477443725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b9b0e330.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-button":"0.22.0-canary.b9b0e330.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QTQfz5L8cwzYjSZrq0VaDbZeLiTTizpU9xGyV93llLCZJN53qWEU4SC+MOLxCBGCCbyyhTPbDQFCshy/EYnp9A==","shasum":"24bdeb321acc1dc204d44b84d05a0d18387f5433","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":108978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWWDCRA9TVsSAnZWagAAkwEQAIPomi6nsyBUEDTOi9JK\nHiHVLETQsios1ecc98Or5WK/4SG/fQBofKanAn5/ndVSFzGhrTwTtzw+wWlp\nhCfa4E9XhrNiWmqqGUFr1jkQiUbkx5ITKeZVMmYzl0lG87w9rqc/51cakaTS\nzzPd9shZEueLy2nEFlFhusC41BWkBbYaKqJi1G+9GfIzpoBLhsMsWU6BIjML\n1OZyCfnilx/Kvedm6FUmKueEjdmtzOEPwJkhsBWDvqdJpStrcKAQe156wbIx\nIP7LQA5a9+2oHGKPVSKohnx4OUCS0JvNDPjsM8C2ntl/CSz8O7NRutWAzOOZ\nhOxDEJTdptrrZz4vXOpis+NxswKtx0b1nDfkPew7yBhYaRx6MY0duOR7pvV1\nw315wMLa66i8WDnHu1aj/Gu40SOHkA56dOCP1aMZJ8U8pY5QwITRaSsp/VA/\nHCnxPS6Urnk1WcVCzOvaxbzWBVc2LJiOgxDxCg/E5IxNtO8xl0jxwAawe474\n9Lef96Gr6VIeXSSf174EGajw6V/QcRRa8XSEPa/nY/Epo1bGRLdoyEdQq6lY\nf3zc21g55HGvZWglqwKy9/0YakWrf4xDgWx3A5RW8dXHhvaBYR7inqnyuEDs\nT4ojfEvWJOWAAkIQTkQq4nx5jJxlJRmEpQSiB9noghaHuTq7xZj0Ya4G6ImY\npoB8\r\n=DIXg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZO2oRfctIugBTgn6GTobk2EEzaXx/8zJB3eh207Sc+gIgTC9lDij0uv6jwC0oB5tkQVIrjj+VdA7j4peNHwwX7j0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b9b0e330.0_1621976451368_0.898869957251176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.ea2a8063.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4bb5eea2b.0","@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-button":"0.22.0-canary.ea2a8063.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-74dW08Cu18IIzjn0co4lVZEwsMWGiPmVlHX+FxvCm3XkanjJYdGetSafz+t3IPDOXlD9djqv2xQ6FsWrM+IAxw==","shasum":"2fded21fbb39dbd1dc57205d305e640ed5dfa34b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWavCRA9TVsSAnZWagAAZMkP/Rfg/cu88Etx8Iq/tQa/\nqh0pkSRGe18dvE8GTvPW0iTwPpgv1f5ehBqP+zsHUT+mkBLyiHTKuRGkKh5y\n+GSMU0UvMj5dCvWYLUSCrBIOhL8mEE2UgLXFBNbYkKu1jGMggtfZyNNCqrMv\n9NF1qS9E4qnPkxpJABFXZmq+QNlW98Yz1DIX5Q4BS4TepEmp1Ac3uRWUPMUL\niCUBIGpO5IQ86rVtC9dEjDUl0azXKDLz4ZCUvxYGFxZZtWZG9bll5Djpn5P9\nqbkWmh4PvVquF9fQ/b8rcBEb4HVSgAA6sMHn2ZeCuBx6/kuBdFl1z0dypha+\nYog0NDxVMjsn9i171uiGavY0m/rXmhZPCSpNBLlxc1N2pXQuipiEnrrs4YPI\n7bUhNmvT6SOiz7DCB8p7lEmqRxO5NFc0uLvbJeLVSQun22FTw4xXxnVzGTix\nimTDB06u7YaCgpaHdbb9QdDBFwxv6RTFs80PS+0SL8vRhj3Nb+TiinQ3JQhb\nGF17Qp7/CuGgohj8pGQHY5Zt+Ce4CIahvhxojVjKzuwi16qGJscqJ4YI1n4O\npY0RtHeiFFIU81K9HQOBAuz3EQ/9phX3ZczTDMhyKlYK5DCbttx5AWgsOmia\nvi90W4wNlKeLfxoGdIfA4DMjlYyn6uTe51EYff4yAlOlOBSN9gvrHnu41mCO\nW/SW\r\n=APZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsdjdQ0tF/8m/VxgEMt25uJCBMpeUZ3fAwqIT29Y/sIAiAdqdCsspnk0Tmi2qVhLUcagS6VDWIjo9oB5GZ/Pnpp2g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.ea2a8063.0_1621976750893_0.20164564584045097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.60cd9178.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.fadab3372.0","@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-button":"0.22.0-canary.60cd9178.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.fadab3372.0","@material/feature-targeting":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/BZu6gvYD9QrROkx9cHleExOeiL+8Un2TGzuRe5e2vHlFZkTNS5581mZQ74XZ6wmIdoX5Gd2QM0BeHaWxJcN6A==","shasum":"5053a7a1e5d79662d0be78eec72a84b05af83a97","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":109018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTVCRA9TVsSAnZWagAAQQkP/1Gl11Vw65QJ1/12TYRK\nL9p/a2wNkhpFtX8EoSngdtgjXcstetqX1KbHNaeI2epe67/kry06i2un0Awj\nXOZUc5kvjrUf13k2As+g636qJPhIkRW+SLJcGiXcqZl7t/w+lknfG0CM7kbW\n7iCHuQx1eyBbcJktGxEg3VYY+TuERDU+cHkPJBOaz/n8cCORw1fMMkkO+t7/\nNfphnel4IS8hfUGbKaZchljaFppW7AEv3tJPjq6TqNHnS/XP2B4xTeZoNm/N\nAWk0Gb7OOCMZE3QO2HpfjUBz/ogmwGM9RWVlOTIsp2JOphuUQRONcAmjhDJX\nyGNy5BCP36emC/CJfVdi5azo77NDp+GUu+60/bxGFCZvLgEP+rkF7bM2tqxC\nZsq/eWiW1ApLQxRFZ9ZcwKD+/Z3lu4qlpeN9jnD13rOQxU8/xdbPPVg8ZIS1\nzmbcxdYH5Lf8XjfsnUzWia4I8MnULDhnF3WnBt0+toyMmXC0rsh86jqZcVqu\nfyqo3/mZee2Vk0brF2NgCU/lg1WOriekH366qnKks/thK6QggjprapWcXDqL\n2XrDq3hYzi14YV3Tmw7E8FZ1GDJxtV+Ywl/x8otk62FOJ9P0PFSRcbg9smRb\nrFidSCXxlxe0RERy16tr7VR9/QObjUbBiHKqgFmZL8hyVFlxmr0EHnibzNqu\n1uqS\r\n=hI85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHwwXP8M/3+ofdvfThQ8u3pu+UQ6IZMgT8NFROJPdI6AiBBhRnhdeVF+vLCXAHVJIw+z5YinsOOjTzsgH/WKl87xg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.60cd9178.0_1621984468695_0.8040817598812287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.fadab3372.0","@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-button":"0.22.0-canary.2e2c75f2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.fadab3372.0","@material/feature-targeting":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YTXqtnsjQc8bTaFgt55rLo3RKQ8KXNyXegrDyCZVEoa/p+uu9ysSlUmYp7nUDy1bHG0HVDhOg96ZeTAIshSJ7A==","shasum":"d587368287b07e9adfcf7b63349f022809e85d37","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":109018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZJHCRA9TVsSAnZWagAAqRQP/0zV9mWyt8giu4/TlnXx\n5OrNPRAQupzCVkPV4e/W73Tvs/xKsrFS6TYGvfvg7nCNwginB8OiuwYCsLb1\nXCvKiM+/VytFIyysTMkZ+w1HkmmXBiYWG+YWurts15Sl6VUvbpK8L9ao0q3C\nJkv0UlShN6i7lFJDQ/bWwJechmrej4jKQpU5brWhFtopLXeaqdGUbkj0ZX1e\nBtZaeNMESa07Xlk+TeigvKoqspr1HQDqT4RpSKr8Oll23MiZlmqkNvyD4eR7\no5rqTMdzfzKc66NZkMiAnwjOhRlg2BRi1h73VS41zuOtmLoPHIKn8Fvly4Bn\n0UUvQ8c7IvYiId7gXPE/6biu0IoOMQru+rdieR5z1JfwFUmJ4lmonBoAlQeF\ng4RvIc0Un0Vb+3vOKxE5AmP0jpF7JxrZeRsOKuNkyGoAMVyBJIUdIKKa+7id\nC4NCWN06LX6heLDUA/5P3+1KboYbkNQaIt4cEJURC7jwrmuafkzKfLStYCFV\nQIFMqMXlMH25Wj3rlD1U21I7Y1qGdBYmIPbZ/DeaFRx44JBVcNIlciPe1hsk\noAZfO5ehKrzA6cF4zIGUtF6mWjcf96Pn29YGIhEX0kL3mrBcF8HhA209DUKp\nRAaRP+ab1H+NVdGZVWBiVomSgulIFTZXqX4XhrVl4zUFeQoS/4hc0odgr29t\nMjOP\r\n=djZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAuVlVT+g6WOtnPthrgaot+JIhqiRKwW1ScGHKJeKQXlAiEAwA8gqZye8XjvXs1A+8xbssK3yOGEdhuv6suH3A5Qlcg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.2e2c75f2.0_1621987911347_0.6350710334276044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b99c77d5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec31ae1ed.0","@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-button":"0.22.0-canary.b99c77d5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5VITwhks8o05YFxqCkT1xEEDO5Nvyi8PNwQAsZMV1DKIfoLMM3oJQbI4xWzi2jD+JrpUV1wcCniEzzP0rQU7+Q==","shasum":"0b9306ea3e1500b68a3db7c47b2c170e3f782c22","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":109018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3nCRA9TVsSAnZWagAAr+wQAIiAHTFpBHrubRDJ2ht4\nqyLZNDLSqUJkAV8GNVHgqn6Mr1hzlLyaJFvaLo15sD7AoA44QLXjp5ftGHaq\n631duH3GRMrgUFVZFB4WCTCFCGApWUVLPAODC+4SfQAzB+8WJ+LlmlpeNIbq\nViaGHc4M9P48lC898OvrnkL2I5xQrQ9kmedGNSZ/bk1Fg42YdeZI6aDjG99o\nYpizq4D1i7vbrqc8XLaKwaN462/JRPhmb5HhFbXCLMTLUFnb7+S16Bos4uCO\nxM6itM/i3H5GBfiNp7rilyZf78WKms5rmdXa0Ajeh3/ajq4mXMdQT5fdxxcS\nH7GkKLrUOIvm5+SSA45fFxtIDKzgvwKB8U+JdUPQmw51g5B0mx9+kF86ZI3L\nAroeZH2lfGHudBT7uwewv3OYap8+sPMkBoxcZsXkhV4eRXLQUCgVr4wBm+AD\nuwlI/385bJtVKpFQzrrKfmHFz8ExWXQJQ+jy7IDnQM7vJeEFmRpbdf2LLLAV\nHKpDmDNR3RZ/Yp6mbPdIFFqIV2Djk6fVMjl5M3t2WaibV8lk9vOScMEreOef\nz9LUEXlVl0vpO6KyD8lovvFjOA23F/tbuPmo+iR9s996L7ZqRfRHXiP+1sLP\nxAhmaYTQgpEadGTi/2M2Vjx6W7iDToWtIfdNo1zv19wA/xiRrcLybb6Q315q\nft7D\r\n=/0do\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnAuloXU/sXEAdC0JtDMITMiLUWoNcF3GAHv6L2/dZEAiEAxGKJLrs2zUvbD9xE+aSF2H1apxHYjsITkz5HzD35ZpI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b99c77d5.0_1622056423018_0.6928174561562233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.0de82c12.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec31ae1ed.0","@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-button":"0.22.0-canary.0de82c12.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mpDZ075wux0ocPNpiZO1dRbL+A0xvLzpXOae45OXcuOwjCIsdVodrsicFQ/0gUhBcpfccCErQLm91eC6GbwF4w==","shasum":"25f2ee94fa60011e0ac0a49050d41cc10f02a874","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":109018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr40CRA9TVsSAnZWagAABvkP/0SqMlDRb+d11KjfsJMr\nyz7c7zCNkUvmt40cJJMfrZv0NMpGnqnFMJphQ/S+IZR/eEQLZeSbU30dej6H\nJDssKi0Q5POP6jqlup1M6REB3ljRwNMEushZpelwJwKiJ109rWcUA7w4TN6b\nKMMw8vRAFfqwI0LA2LPK1stUfAReNkweR4LgIezqA+KlzliyRo44jalvoLRx\npQlqXBgAauhsPMyk6NSylthNZxqwk8vGYu88QeJOCgaGm5OFURlOPh7RsU1F\nkY678BA/3LVK2Q+WP+BoiVAokEQsYMXbMTwEzjD3QTww3C+npQ8eKX4SNu4E\nfn8INWvK7BWgw+l+0zQIFzv0MZXA4Q8RhWzcBzNrvmr+E4V1ei6ru7ZGzT8+\n1CASdYRkWs71Jvv7dnd9KuJJmzz4xHlnmj9v1dw4h+n1Epj5RQAfYGbuc2xi\nrF24tBqndAazjG+SJeM1+gZiGggqAS//w0BJYdCnb9E6yQ6Q3fAgqqFqgu4h\nBbKgGEI/sHQ4qWHVWz8KR+Ur3tzliX79uInGzCXqURrzEwSqa+PjBPFWEzTb\nbjMqJcSKj7cEFQFUBY7vBzxkRXgbzG5oJBWSchQdFj3OZhf0ZzgU6Vij+Yw4\nCWdKUxG5f2jLHQzJGUK+VJJJ1zdIYF8TpKb3i9OBRQqv4DHsEh4cxsFl6uCT\nWab1\r\n=bN3n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1iIEiXFuL+NBXgA99gMh0okg8Z7P1+RIdbGwcOcfwbgIgBm/bMYr7Qqj5NnjMTGsDJ3CqHpTwyt7J4c+eVGtuIgs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.0de82c12.0_1622064692415_0.6264962659303417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.227a4614.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ec31ae1ed.0","@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-button":"0.22.0-canary.227a4614.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EUDkLLRyVbCXyUpZlM8uJO/odjmyYoR6XNN3ycwy30OBnFAxAxYUlGR2n4pRC426cwu/DOUeV431mZeiSV+zhw==","shasum":"3d28ccfc2646b5f900ca39cd958cf3cd4547aa07","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":109018,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LgCRA9TVsSAnZWagAAnz8P/0tpfR0LN3fyHgGMlqRY\nc1B8xI4SYFc5TmAqMHA0FuWiH7IZ5FZpNhGj6YlQb0pdFYtujlOxlmt//Gfd\nzLyvs+OzCUm5us1hqbxcIW4kEcwhxSTfv2BKxtK3dER3btmMHLjuCfS9IiR7\n9YcUYZIKl6QiZ0o5x0dLu2OMtkDdmuBB7orG5lNBH2iSdBiTPnFoz8A8V31u\n66F+jmhlm3xKrTk6Xrg+ZrjvKLjiLvfJX7wDZgqt+pTXCM8sGGj/66VZXTdv\nWlWzYO1qDTDwsJqR1mAC2rK4uQyB0v0rEQUMoTpKDyCz1ZTQErs09r7cJ1Lx\nk3iLW2JnDhWo4ll+KIftaG/70dPX8goDKExvQXjTGuD5zo7eVSrUHE6A6B0b\nXsgFxNWVDfwT/kcaJEKh/iB4W06J3hKNxHo6ajZCo81IyEsU1X7J3yoMRtLP\nV3AiI5UutCSicY3s8liOc4wh1aiaI6VlNPjhD2Qn/nNeH4pa49hKUxfKYaqf\nIWGFVkn/t0s+qIo9Qw7whpxsAaqsQ9fOb9n9AVvXP/uperV+kr6A95H0LWgZ\nSQxy5kW8aKTFsUu3iih61QKj/Nr4rcONqKBMKs7dhe8BKOMHxf6eXWVfP1of\nDKiWDXjDHRRrnEaM9Pvma1dTBblaRh3URQsd/5pkmQz+lFp55hDJIt5g6m9M\nNbHT\r\n=+wh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhYVO9XveX1EnP9stG3QUAb7cmHBzcJkHPIOJCmsK9AwIhANY8wChu/ozlqJdHeqgHh4u3Ho6puta6UZHFPzMZqcGc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.227a4614.0_1622131424204_0.4145475261834717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b3d21d31.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.8530d3514.0","@material/dom":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-button":"0.22.0-canary.b3d21d31.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8530d3514.0","@material/feature-targeting":"=12.0.0-canary.8530d3514.0","@material/rtl":"=12.0.0-canary.8530d3514.0","@material/shape":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O4Z0LJQ8eannt19JL5WFTrHhVOK0zvFNFoaQjFTh/1Em5XKRJ3SqRDDXy/Td8ZHocQDqk1LqQNpbY1y2rFcVPg==","shasum":"e13a36dc75130a1c365e3188c10d65f655771569","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jVCRA9TVsSAnZWagAA6pMP/2LUwQpL1TDhjjIGHfu6\n3wHgJqVkPofdL+MoBZgbsj2MvYVd0k7Y9j4vLvsC49CuJlKR+Gi4YQsd3/nO\nJm11WpkXKRrWSKOaGe14T/aiOIZoKu5rp0eVLQCd2tGY2y897BSXIqoO/xh8\nrzbza9WyfUK5mesuQ/mzU4WpqAmLMywHf3JDnFLLa0qM1iWQ8UetpywwIjGQ\nSva72+zpzhk5gNMsWU7iUTfNgcf0PAtKpyoQgMJkoLsXG24p/+RM/p89IxCJ\nyNSySw06pTFeL7FJkOIKaTs9Rvr5+72E8W/JSw44lBbHsKPePuiHL5AcVbA3\n1Ub1cKruBnkgTjVbJK850pHGa7zwyBO7L5fexiAr56bVKePYQofK26b+zo1q\ndvOiELxRFl0cjW5SfhdLUR/UCNyc1R5mtCE0xwjGk9CUBa9rIYnoo5rCzVmn\nGPjf6DsizlAcMF5GzlcnL6HaBpT8TaixPF7193JZuCiRGkr1uopCBUSwUa9q\nY0OdEmcQpkC8V6bPk3earCv2kc6063gwQIUHmZ7bmVkTwqy7Y7fzdzy7rjJl\nSwUP54VS+QLVlEdEIwUS0UcYbpQWXFNIiuAPc5ierUPRzp3rnBFNJ4ZD/mi1\n2birrk1haZLjWzyXbXTJXU1LQ3JTXD7LTt9q4UEHU65UfD4rd242xrwd2jcS\ng084\r\n=y/cT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3Y9cRPcZo31r+toyyWWbdm6c+BB894dDJd9XEy4jzRAiEAjVl4e1h+hV/ZkzxC+85dVqSvDpYD2HNDp4a83R5u0gs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b3d21d31.0_1622141140523_0.5344483053815254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.288c33ec.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.00b5899dc.0","@material/dom":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-button":"0.22.0-canary.288c33ec.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.00b5899dc.0","@material/feature-targeting":"=12.0.0-canary.00b5899dc.0","@material/rtl":"=12.0.0-canary.00b5899dc.0","@material/shape":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o0pCv+ALHLioUUbC7perE8iqDM4qJHP0Cbl3Ck4rLZNZPua+B/D1aMdxj/SG4kioO9JzjPT3OKcffIAXo3JeVA==","shasum":"e4d81b80f3d6c9cd131d02d9ed4559808d91a3ec","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90JCRA9TVsSAnZWagAARQwP/1WU+lEgmdusRP19G+cL\n4/d1bNKAPBNGC/KrW3aWvuPxuYLl1Gla4tWqgakTkx7rYCxLUjEhzKaK9MzF\nt4FAJ5lygjTo4RD6dwa17D5236z0Zv7sr2ZPdCXqTgLC3Xi2EB/RjR9dXzRN\nwYrPPPPhU97eTtEjTuIvho8qeWdjfHZWdDaDG9mXW/BCxIv9XhtpQFEve9fT\nHq2Nq7nGTVhFahMVOhHooP4BJoAzn6jpmX7p9TbZZw/oU3q7cpoXLd0bA5go\n7ZWcbWSRFoj5dD6LLGEctH4UOwQFujEatijyoeTWY8iVOISLWXZ8PIi/31mB\nQMA4JkzSGgY9LAt1NG5McvNnP8rkpoaJOHTf4BwYFjmVPSgZGo9u0HwZGsGz\nAT6K8u6+1471f6JTPbBRGMKWoq+/PUDVtXNwu9J4BGjo4KyJKG5fuPSIjziu\npuCU+v+NC6vSsdebcaI0uXCMSuCqjo3tp62kNn3xEY0fXQZCla/i06ooHBvL\nzo0tjmagivqqAUUVzBtDwR1jEonOtEGygqaGIcATCEHSnpeAU4yX3TUaeN1F\n9eACGsiB8bYh87uDVjhUmg04LWJ4nYDEDIpDwqcin7S48ePSiR65CRC0yGv8\n+IKVmcnsx8KHVY+oc45byHQ10Plw1TWVZAOf3Uye0FCAVvjUJwxJKFs9+8Mv\nx2xT\r\n=npaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaN9Q0kYLL0tm/MrkIk7waLBtJFJSdxzqbRJtTA+nY2AIhAOAOy68DjjEcZKIWQClC4K0/T6Jz9k6ZzAN7f8CJmCFn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.288c33ec.0_1622662409042_0.5329951562060948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474de7878.0","@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-button":"0.22.0-canary.7eb7ccb0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mKn7Jwr/GveELabvS+NCuZtnJHtPB7KrBxoCrKcwPO7CAHHKiXPzWXjOCvnLpYpK5lSSDFIpEdMPUl+/EeIggw==","shasum":"3e520b1844ba24ad5037c91fe5eea1eaa40d2dcb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTO3CRA9TVsSAnZWagAAC+oP/iR7auBLsNF7zxzdDLFT\ngGkIecVSXuYzKfYD6sfSrlNg328wf0OtMmoeWYdVH9ru/W7nYd22j4zDbJM4\nNnTJ2SnXz2Zp3Er9hcUkmCcjnfMTrYZjlw+/nuY+GGjQ+T20LM1SRT6QYB8g\n6XnqBptW4167+9TK+oSHkbvHnAfP5qqWRgB5VIHqrQZszpRdiXteXW3e6Ctf\n0gOhSw1uM4ciJNYisASZGbNqECp/AIMbSUWDpv+UWm8kzW8r8Uf2+vnwjp8G\n9hkT2gMv5sR+CN0EQ/KoYlfM6WVrKsTRfUcCXEQVARcNLAZMClTD9x0LZBOD\nauc1RzKlaQgFNo+/fUHVJgNVFulhQ75jpX67l2ND+tncTpyduSpZzV+juxuY\nwWAzwsZq2iaUT0VURfkG4KEKN9toObk/O/q0F/rQxPqKOtTZr7bi454TJ5Bg\n7dum7tDJeDCI6w3rxFu9zPG1ifSmP+3ckF3KVvxFVAoVvLIBES//OY1nqBuN\nf4aT5/0/rTJ3KL1uuitmQ9zjkQ2yWXcO7tRtWWaMhhUZDdE8Yci6uh8eaxkA\nBNsfygzl0QrfH1sFrinz42jqdtvG3os1jL2UUJZ1FxTs5x+lFf7HfYZxcviq\n+LtagUy46nE/uWeVrzLsMSJZqm2fNawUBjzdOmH1iMBCDIj4/3puToiMlt3l\nr0Z5\r\n=nwii\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMwAQa7B+7ohC9QAEdmT2mz72RIn2cT45TvIMXrbJKwAiA3u7SIXQ0d/H/jYBofaigD5BCO1I4TsFugaJVAdd8Umw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.7eb7ccb0.0_1622750134847_0.6617350423682982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.7fcc0726.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474de7878.0","@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-button":"0.22.0-canary.7fcc0726.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6xst4uin8Di/6/rTsNck81nBFxL3SrO4gQHBQdgaBukX4kcYfzULVnpan8224lkHr3XQJtJAzEMPilkWe35nqw==","shasum":"f6f137f90ebcef33c72dd5a7f94d3bc2c2c85688","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2/CRA9TVsSAnZWagAA6DYQAIBBXiW4l3spycpGyNnP\nKPfRRArMlKp1kTHdyFcBsVtHs8HqVhg+43d4xw05TT5TOjcCJw2AvbSB3zUX\n24Jbc3jKEPVDBrMlr/oDP1aRQ1EyBkNOXs4VdDP8Dxjab/e6WQnDNEb/AaTO\nMRZjKu+TsXRq6kS+cUReG1386Wj/8PG3sRrdljIN49mye0SD3TJzu/TMVUn1\nSMl2qNxAYSs5lOPqKX6uPMGX7ntwHLcSvFSG0P6dry76Af8v5yS+i6mL2ugJ\ng/McU48oOgDTQkxIb0cU5rVo/1N8FGzp4QhNfMcIn97NPsWBFFwWiMqST6Ix\nFk8/37IO0YBwnrrvKCxg8IHsfUY41j84xsVHigMHAnb5IsWUes+yCGEYfq5q\n14CK20fxyqZoEYRWl4a4Pf9GeObbixOZc71pNdTSEV/WJSwkUYGlynl6wqBF\nlfsoq/q2pNPxS8qfhzBTW9oPKrkItLCf7ckckUF16RWipA6j7Yf5qLXoqfc7\nBm50v8FL071a1BsvOb7jKjCvj0icAm8sotsNOPH302DEmGok7eBqwW6adsRK\n9hlw8XpiGwMTS1Tg81DEOzhFEhwfbKY/I4bUEJfht910OCV2iED0ENIbl2iy\nq/dFR0Qw3gROzHA0K4pvaFViOAampsG4NqSJR1G8v2bfH11rf1RqJGlMj3O1\ngHud\r\n=0BTZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzj/vHldGvs6zSIpHIC9Faxrpyu4jGnt6uFiFtxiUhhwIhAI5/AvqtkNRXJtvNs2nLn6eHkeekbv5Rh2V+7Wqc9Jqm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.7fcc0726.0_1623113151731_0.2692925639895425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.220a4e5e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474de7878.0","@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-button":"0.22.0-canary.220a4e5e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q98HMTGQGRs6s8AmY1Lfiy6/Id26VfcO89p2VL9Lzmg+AOjWQKM6jvzoU61tt+mpDiYghcyzGsaIjBgKYXFhGA==","shasum":"f76a1523687dfa2b72750f3822c3528edf4de97a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63oCRA9TVsSAnZWagAA1ycQAKUuIUxHypq+/jaHFv+I\n5lCo+zoCpUZYme6m2Ozyma+nqPlNxwk3l9YgR4cKK0t/1KlBr7MW6LPy8nx0\n0RrLoBE7PKiRyY8/GKScr0WA86VtVdfQNsU6cRnNLbbFobsNHyP5Y6ARvSYZ\nVjqMy5RwQ9ICeE8QGLl8/0sHjCoo6nhj2/0KBhPqEmrV1BxXrY56P9FwCwJ1\nWkt4ZuBWlqH8TiU5IG6fT/hkpXTpB4Irr9mFmik2l3/CdQcEWVmFHHkf4yY6\nT0yeoXJU1Loc1dgWpDySZXdWpFkI4L9v0u2TK4cwqcH6Pq8KIsefI0aY0wXB\nxcn2gALewF2vHCdPr6GpXBo4S4VZssIM/Usmt5902j9HOebLjVkhFK0gSonw\nIzQe7QIn+HGVuwMtZee3BM7oYKogizpALOhSS4OQqZozY2F63uZpqrZYo2Mh\n9EcOkG2C6ACkJF9Qx3Gl2IkAb/CEM4FjX+bwTkWuiO65rCjFHJ7JwlbgjMSC\npLhaDJ5Q31hRLjsJ0usMyKnbEedPrpzuAMYSNh9ipakKuGvu55woBPbvWcYC\nBsWPIF0NlHaF8qBICdDxynlNXDeAaV9sWT3J1juxlDZGAc5R9ep/BAaIGLE0\ngujv725FxAoB/g2ZcMzdcbOdTRbe8+5L9behOLG+0G5abGaTlbvO5yEtlF2q\nXLgn\r\n=GM3e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZvYlIIgyek+EMvG/wxvafR68TwU+nn36+N/bGHEhkwAiEAlDesVmzzKWh2+eT6fx0j6DvJrVtkNjY5xCJB0iPRuu0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.220a4e5e.0_1623174632645_0.7948371392890174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.474de7878.0","@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-button":"0.22.0-canary.6b2d6ab0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.474de7878.0","@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7U8eqAt6hMx6pj5IhtPpmtecAS0oZ6dMKywwiS8xbeW4UBylZ5N6I/7V9k1nJozv8L7Yt0qKFquDOY6CvSFsDA==","shasum":"5401a0dd7044df3e1acef5b2877822be83fda1f4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":108994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jSCRA9TVsSAnZWagAAF94QAJjtAGYFkY05XvG5K/js\nq0uT/AfTyY8filmhUkbR5d4mCIOaGewQaBfKv38i3k/8cTGzuNtWVLDiMNT3\n+6sLhg/lv/+rhriQupha/OKut2ynaexBkenEdvIcuswlF/WHUtnvt+m10VNN\ncR4RRi2nzvsse0SuzWK9OXpRldPye4t0NHYI03qYBdAlqwzE2/fa1/9xw+y9\nzfjkBiT8pYlDarKMCHT/uc9E/vYJttxFHYPd1YR7aljH2fz0lEiOcqGaQxHq\n5WDmcSJ/KFu4k6jQl9VUUqWtLqgbUS/BsKX1H2+QyOJBuQrMbS0WmKLGPmzh\ns+X7fB44JfYNiCmgqob/5YTzYG1vtALqDFFSMoSpQNQrBQPZTb1mxYWv3lIW\ndN/R7BPcYRWCpIrjtzYxW2OXpVeixZ5Ep5EVK55acAAo90lcWjRWXVNuUQ8s\nvjBlo+5JovMC4avab3gEVOMvAO8JmJ4DPQ6Ydlidb3rzYGyrTL7h3GZ3kcDa\n1UNuWmuP7Kz+nek56Qi4H8vyzPSgwcAy9fpMCwmXryUqCR7xYXufjNXKKuJ6\npViE5bM4+MpUiWAANS8dZcPvmhOL6jUlc4nA7eNTv4aRevvurzCZ+8QvdZ/H\n7rF0DzzsjK2FRKacUaz6sqlI5qoJOJ49FPDB/mVhfhT19wqdYMXBM0Ir1N2Z\nLYvQ\r\n=Ae+V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKvzHLRdiJUe+Ajz9iisn2ZFhSScEeSbgkQZwr2XW0hAiEA1M7sByhYBnr70/VgB2DlY5rgLIDOO6nVPkgTHVkt9nc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.6b2d6ab0.0_1623177426159_0.9701153851808455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.2b20825e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.8415ae585.0","@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-button":"0.22.0-canary.2b20825e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w7VSX9DmuXvo/apBI9MTwo3oyX7gK/lcAlhU073M5zdmHhPBHt7cckUumswuioWSFxaFcsKr8uSXk8qA/yLzXw==","shasum":"6c4ca9e476814aed731549cbec8428eefcce53a0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":109054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aFCRA9TVsSAnZWagAAsNIQAJppcQflLLafLkaLIFUB\n05cjq+oT0/+roxqVjpoUO4NBEt8w04PilRTO9vEDwvboV1zrccgtlc4Gacwi\nshs9zVPyU9+n63WVPA+We/UtkHbDeZen5h+/QOvpsszUJyHCjfOn4r95DTrU\nGKN4G9zO8KZDue6QeaQyPRFFZ6CXqDrVoc0tOaH40Y5rBzZ8mm7649wvW4ou\nI+iAPA6qQ+fbvSL3VutUkwi8+DhI1y9WoBW+cMBQDoxbK5zYo0gAQ8MJr5gJ\n11BKuMjhb0vzc2vXT9TIh2y0Ez9cdmh7piwf/YH8/MY4iwyAO5G3bfSAEUPW\nK5Q4g1cw41KfYTSuyV8Y+xW4Yf1EDbAir4m5avjuiR3qz9I0vkfFeKlrsgki\nJh8zjBAem8XvggIesK/TmsbqImK+o1ojsz6+QVBw3KZfbXTGTTmaGAgtTzra\n3vx7mRBUpd6p/vOV4FUxD9dx8AZc/gGLi2rbKtQNKm1EB7Du/XvZnN1igJ9i\nnfDQnqk+C/KdpHexBzkSIE0dpzJS8CyRXPzafWstIVIb0YBAEGih+Y/jfyvV\nhSGKeoocwHzVfnHyyVt1cxiv9cnQNNM0xQC65gE2HWikRCJttSb3HM96xXdb\nTOKegCkq8nsuqniGK6pVEbvQZTtljyur9P79M541dhy5wXwlTw9/tUt28kaC\nqPFK\r\n=9lH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrPc6X7HgBjKa9Rs8rzIlp5XYCXN+/zHVD6kFXrLMVsAIgTSp2jRmLZLZUQAqCmgVdQujQdaGCjq+xYO5jS/shYGc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.2b20825e.0_1623455365547_0.7780997146422606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.e1511867.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.8415ae585.0","@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-button":"0.22.0-canary.e1511867.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+FlX55Y92bDBP7GSW2G2/EnOl1GTzq9Nuo5anN4lJz6az0ZdESVMuhuTcTF3V7M+LjXP67bIp2xsINCMAgemIw==","shasum":"79c6f5299c0aca6a05fc40475473e7111226b763","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":109054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAaDCRA9TVsSAnZWagAAiVAP/3XmOyfN02FNcTS7VXSh\nOPNovn6Ki6LOLia2bHUyXz1CulwIJH8dSXz2lmiAEZ3Jl7Olmj3HWQ01yBg0\nNPTfwwFVP4YK/STaJxgxlraS/mKn5IqKt8gsCwYP/JCHVtTkBlpnw0CrfucZ\nZ8KvZ69Lwh5A1PDqdFZucWMJmVoWIucmgVcTn51s4NUKpp2+EDq5xPT5maU1\nmVVgqssQKEjxj6z5qSdxVOoVy9nf4CPI29E4F26q8HOQVC51qbX899e9aBfr\nL01hOQwkRrqxW67XUL8cjNCBW182TtfMtyoUqMSxZ6FFqgy3OQjhEc7TI367\nKUjSzy/txM7zuyEg4pqa2AVDxUSm8ImCvaWH9F/QL+HCfyFiUN63ZcFrkcU9\nPyCSktuKjQnSK/FSfh9ccKfc8gMRH69PVUB8mcdcabTCzgQ7HLdgKpa1sfjo\niyskSNUjYW/PPOMZ2ZTkqiswQf0KdWvamr1zFfYg79fRPFY4zqJSgiHefFRA\nENmjRL3V1r31d0bHMBDABCZ9IxIGrQ8hfV9g7Un58H30SlUi26sNmA6wEkR9\nYZRfE9D5NLs9ZirgDfSXb4W3wz7e8QDvv8r4jzvxGQ99lBQpijTLE9xCel62\naxbs702ilKDoHpnsABCutAvNKxAd+Y5kxu99jY+hWTW0Cbqrq08bZPgCcf61\ncE2f\r\n=HXbk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9/rMuUmfR3QLNblpV/rFtG85B/mXGi58JcUkxsMh66AiAvxU4GJXJmIFBDnYa1bwTwEuJcD6p0sNBnGdrXpxpKNA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.e1511867.0_1623459459227_0.5581794365777408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.8415ae585.0","@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-button":"0.22.0-canary.ef4a0c0d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.8415ae585.0","@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-djRjCNp9m0kZ5jFb0rwBWpll50eM+EBqNJO8zNSDjGuRawmqKY+GHe9Lqq8Fl322h3aYC8PNhtwVjBdKDNlMwA==","shasum":"bbf26ec1d1c04c70914b5e6d3ecfbaa8b94512d8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":109054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTzCRA9TVsSAnZWagAAx8IP/2Jk1HhL3YWl7Vl5gDox\niaNBs0Ul6EkfPiudQ2ZjtPAlnP5/qtBWi5i/Thu7mHlIJb7FcTLwexwI+CSK\nqZzYUqCjzlPWE5gUuYASBFRF5fGRHIkbhD0iVXf7MHDYiJlbCmF6PAxfv0Se\nR/8rWKQI2+IhpE8u3zOP88GJxXysuZY1oCX37qErTvHhd8VRBNDh8uzx5WWv\nAH2z9zWSWsxWXrbttSV/1Xb/MGDysm7MS5VlcqyVcT5WOfbsisLVeeiuC7Fx\n8CFUmC/RpWiKQEJ4YoRl3aBwx9I+cIZ1lyWtlnfaJpTEGdQa+PdvsYCn+KpX\ncMSmjCgjYkjndqmkBU131dUDLVxHYXIL05BsnwukIB8i6Fr1jFqyQxOzpeII\nAzt0weGV36VSVAZTS1TlfVQTHoF0dFcbbCydmixv8P0eDE7dJ2KBiyaWyWX6\nvRuRqF7xRE1xaMfpDERaKnBgsCgLLR5v72GSEesUXWEO8U1IFNy/3R/5h4a1\nFBu7R+f7erKZ1dJob/8JCEAJe15ieC6+Icu8QhKc+riT5YqbZmi4PfS8YjyF\npJvboa9S3Tf/LiNuFWQph/CGl7T63SmoNxpvhpWrahQSMi0L/tUxAFbpDVn4\nDrUImC3r7rlQDhc3Gm0rsmNC0hU9gxpRG0WhxQrZr83mGhm554fERBw7uh3+\n8l+A\r\n=v+SX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwEzA9tU3GuT3kSkI6HGtCQdXAcRy3Izsn/3VBKtCLuAiEA9bSbllkqYW1PfuNiprS7+hoBGehXQ3G/0lwSNa6L6sQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.ef4a0c0d.0_1623786739006_0.8056783294368448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.573d8913.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.f705e8048.0","@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-button":"0.22.0-canary.573d8913.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.f705e8048.0","@material/feature-targeting":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7FdFFbL4ekElkUShubJfVCXw8gmpiDVuv9JCyj9Ycb3ogLW9ApLbdPYeOw+paAmvuXudXqOglCs2+UtlheTJ3A==","shasum":"80f37a92af7aaa28215dc052e4dfe162f417b3ea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":109054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvPCRA9TVsSAnZWagAAdgIP/3RTmqRUaH9VgKFfQcsD\n1rJEXPLvGyPgjLHXKZYQE6kW8YJ1i5jM19MkA9IRGhyx6cYMNVC2VqHZVic/\nn5na/uccz4cV2jCoyydpxTzV6y4WKSz05gwQe1BqYuBG7YCFbymA3k+EFnx1\nFlhqF/t7IuxA3ZVMwTB/5h0T2WePntLxfR2kQNWfrve4t90bW23bmrXN0M0s\nUXgMAFTwFy41K/nXCJx0Fflg6kgBTtls+el4TRUWvOlsLHSCeO0huN91szeK\nBhw8T64IstgnI4BLhhu0OgvVrBFBkQpCPzc/Bxb9lOTWBr0HH7lwj1v5vm04\nIoYAlrMsLvmYaxt1uZF18eyPJh3V0IHHS3ELquT5VB8p0v4O71joXyX0g6mq\nZcA9LhKg5OFtNgXhDAZ80Yb5Ng8JpwW8iutEU1udEWaAXpNtmhsOy6uKo3IB\nqBf37VxYZ9r13BTSjiNQitcx8gipWqav1ynZ3X5pvXwwYOfB/8gK4Vfsz0j4\n7367wxp0eBj01MM1I+/NIQhbDfCjPubhPnxr0Kg0qC/bWBfWmxKWF2qQtu4p\nP57ORakoenyTlaoMMvhyFnDNedoBwod8kz5PQ8sw/aDn5NyF1TLXe1QYttVR\njeyP+QRo5M7XP9HjQ9OlQUsesJBObTH1hrx8D9sg7cL4MMzKzgciWSQ2L4Lg\n0Bkw\r\n=dcnh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa0PbxKzT4NczipbbA9bCbsKduh2faYwM+HFcGW0qAoAIgLgSoeBvdECYQJGnZK+MGx3AVHt//axUnQeGyVNntIrs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.573d8913.0_1624058830639_0.048045814922511365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.21dba001.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.f705e8048.0","@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-button":"0.22.0-canary.21dba001.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.f705e8048.0","@material/feature-targeting":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fLS3jv/jITtO0aIfrkXfDDVsq0x7kSynqYxr4cROdDh2SqnS2QNFvthRam3wc5gFTjbWyZ4j60gEN2b8QjoyCg==","shasum":"3b8f2d5e41a4e611278792847baef02c102c4510","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":109054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdtCRA9TVsSAnZWagAABQAP/1odPY6leX+PoJ2fxBQR\nqiFPjsQY05ruRXOhtTPzRUSbR3G1l4lSMyBY3G9TqQpafeaxxm8i4gccy2hq\niSFvwXR0zXKEcIKQKj3Q4Go0f6HDI9BHcXRJVLEnxrTjTAU3fk7aZw6XHLy6\nc4DTcO3/ewXMxpcKrm3lIUcAv+/VaybYowEdSGP8r0UFaQQ5xYQCZWGbfFnu\nXGnZYAExfXhgXHks6Gnw9tleiTtGU8U+BDYoF+HbNICoG3BFw1Zh3XKbn4wY\n15phtnB4tPfsXg469voPyGPEIHyfoinyaSbuwdg2wX+ow2JrNxGAtBrekEh3\nvdNWLpCFjv7q846fp4cxnTcX5u/himWF8CcEke0BITksDC5ihO9XyQV8d8So\n28bYqHOTyTdQFolDRyfIpr4zvJiCACRmO/u16Ea3IH0pn0D6t0Gf9uOv7aiP\nJwGgBMn30xdWsBIzjsG6BN9PXh2i+ArlzR51LhRm9pImIEByxZACH8YWtn0W\nhW5deS2V8KgnUxNRkAQlHtuHmzZfLukyg0xX+nMQcJlLOrOQSBhqbjj/RlzN\nYNbd7lyWNMiNaXaYLgIp7X73PWjEZNQS5NZ/SEarSivRWrcUuK/aqAtRHQuk\nOefK/LDqofxl/5GLMZHCzrT4pKvdjCyNjcVPJGyL30zZarpfPonewYUEyQVo\n0fTS\r\n=ilCb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCexIiVM6vaPBTed+Jv/q+r6dK9nPzlp/37aKA1xmNl4wIhALIPLGu8kcVtaVkZwO7FGYQt3g1fUSNDztJpp/ZWoUgg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.21dba001.0_1624311660887_0.36910477145555176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4ccd39bdd.0","@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-button":"0.22.0-canary.6f5bfd0f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GXqGoZoGPskGUahC4RLqAdzV6Gu44edASZjA3DBTsauRzlWwFfHPBlPjm/W6NRdKbL2rJpbMHrdk/d7hi/Hb0A==","shasum":"7d330ffb057f036991db4f6536335e71f40474df","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2cCRA9TVsSAnZWagAAb5MP/1p+Zripl1cUf5wjK37y\nvSzLuh8avEt9y9I0ljXSBoblm/Hx5hzhVrclVpmAl8cPNOCpP4pHvIWBucqe\n+sso5BcLDsDYZB5cLC2Wam6iFfAJESX9Jz2q3Xi1cx5qylRVCUU9xRtqpOzS\nw7HkOqgpcmceB0AmElkYOPCI6fAAr8Y2d6Ob74yQ/Pp1jX31+uIZ0TqqLULl\n0aPAS79s3cbE+gGwJvVkyRchZLO3XiglJdyxrBwsozZ5hUuavp+aY4UAHwvd\nkov894THMgphhtJudVDBgNW9UrAszn6RpV33QRP+43cJ9f/WJASEWzeW4BdF\nKtQOTzfp6CuAAE2xmkpMgrVzR5jB/qmJ0YMhqu5mh2nDXixZxC3iPoFgXtfz\n1Gbx9C1jjdGrbPLnR/OLGZ85IxSVoTERQzt3hg0vr6qURgKZyiFWa8Km7log\n0vr2wVsDk0Ok3ccTddHNMsd+jiQGWs9p4JTkFeC5kObQvLwwy395/1fMghRN\nhJDwh5B/jJ2HlxZghiyyOe5tuqwoHgr0+qMvLS5TTmn9VD7rj1vgcjMNajNZ\n9AutRKHcnZg7U7YWd3Uk68z5k8BbgsjRrNAe6UjlmEBk24dCNBERdEtqmvcd\nh8u9hH5qCuTcQB934fU4KY0QpkUStVWBmbaTgs+cb84BW3c1DI/G4P0HNKax\nRhqq\r\n=No4Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG5kdAul/mw0hBDTgKAvBHI64aIp1MJq/fwqNe/ntaUgIhAPuf1OePoXgj3Y5a+sG+XmfiWO2XzTU+rifgZrwTi0jF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.6f5bfd0f.0_1624575388282_0.0027671192102542985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.fd8360b4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4ccd39bdd.0","@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-button":"0.22.0-canary.fd8360b4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L8RICv+m6EdQ81ZjPvtLMWyDvb2tE8TBYv/jcxOV6pTn611B6oYeqhO+fEj+Jl0yOaVVTwcKxgbm7WDEcM8W/Q==","shasum":"f7ea2fab3cdb29a1dfd9abc4812093c61f73549c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inuCRA9TVsSAnZWagAA4EcP/12LAHN+kgug9JlMzVke\n8m5DFpGkwecmdlbZifx84OEdZO+08KPByfqPPg09HCeThyRITTwpEyWGclpM\nAkgy3VUt+PFSXCwdXyABWB6d1mhRynxVF5pYcWKq3rFTb+Gcu3NQ5ULjOSgY\nPBjo+emH15gJZKVtQtBOEo3/zkSZbfkizwjDsnkIwUH5L1ZGksulY5o6tzBi\n0FuFlNOhOhgn93iqQuCyEpdZiCxt0B5yYWdL96ywV36Q3KLxNX0itNlRWRUy\nuqJp62UhCJzNRPG8Hp5DeFga0qLsVxaHexqN7u93LMGO2rgyl2bdSsLraUab\n8PSdQfhNzCIJqFTZw0mCwr38ytJ/scjHUWvSI/s38NhS1KLcbtqXAVoEsORg\nE+L47+R6HHALwLtQ4tcvD2/L2wIFAMt+T/LCVetV4O8wdAw2jKN0USGsl2bu\n6NrD8Wn/tE3x+JAcZ/ljxwdLVD9CCS5MTN+whyjUHn43rbst34W2OF2oMvi4\nO8n2nwyakvF5LDtdVatBESNuAjPwh+2cb2k7Jj+KyRdNUs1DF6XVxtlgCAUq\nay3v5EqMo9xeZ+x7Su8r6tY+csJAuukvpDRRNvmlSNXC0gMTWTAoWUmhm8x0\n2SpHJua5yiEFQ50BQ8g8KcW4OfAbPEEdoz85N0tQA9MmpF9MDODWB8jrBT31\n59Jj\r\n=bLxs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkg2+fJZzLV3gLN6635DDgk2MY8gmAGx2kitlUUnFSgAiEAlruxPk/8rcnwGVv1k9lk3YnU7e4OL8kSoQsFHHJsV78="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.fd8360b4.0_1624648173815_0.025734483195146485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.6f74432f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4ccd39bdd.0","@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-button":"0.22.0-canary.6f74432f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sDQJj+RUEOqR2d7S16ZM10jNmC1tvYXgVwqBtmpgucjCyT+ulVgTmz0oLH6CD0stBiC1oRj44lVOvVnF9iySbg==","shasum":"e3e8392bb3f23fd4510670c33cdade2f2e5926cc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDeCRA9TVsSAnZWagAABIwP/jxe66hDNAjZzf7k1txp\n+NrgJJIAa7VfMdNfr/sz+3gBbFnNPPK+J6frIGd6YajjUTkhf5UI8dDW3kOe\nk2Mfj3kiwAErqmllaLpAj29wS+PsfJPX2XQuiee6iZm2JRY9UDy3g9rSo+D9\nfKJ9PjDei7EtqWlPi98/W3jY2fvqJ2dQMB7i4Uqo25n9VwnZIAIHTVlRvnXX\nsUlTmLdP+rf7aElfmI9fmu11IcWSjXM5tCkjObtqxLNPNstEIQdhd+a8ubkU\nO3eF9vsyAbDeoliIwjsLduopb/4OtVLLY0RE2FWjPoPm+T/ofvcvobtlJj7I\nDAbOsJEuzDL/rvHKbys84fsmcrIh8le2iSX8JD7dE1BvugX/79nqGJ3QnygM\npag1Rm2BCk2kiJQULwvK//1HHJ+6L2n0CdcsNFybEwVQa/WTtqKXimriBj37\nIyg0ObBCKByP+BpGNlNxlSAy/crpuFJyDw8YiHbcfQH5yv7qdYSOGKLQi9xy\nuvFFFisw4tPScSh8WQnyQfoWgDwg2j4umlJJTYDtZW5BOBQXztdPmBlOuj+p\nboU/EsY5D/zcRUGQFHhR49IJJfdjn0NJ4FH5tipjMSnSIbSZg/KQ6A0Els5g\ndafHvXiKqgP3jgneyUU0SWdX+7o5gCXHpVrtfCAVUxUTalinA1Bq6tdxctRy\nUj1k\r\n=O9/5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeVypufeb2PTUDaJ5g8Xg4OkcQk+jGQHd5S424tJymzAiAz5LwSVfTUqFP22Hy4kY6bgM541zkY4J0cOtEaxenIDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.6f74432f.0_1624654046342_0.026217996896213958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.b62f901d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4ccd39bdd.0","@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-button":"0.22.0-canary.b62f901d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P2B3XudH4/Wa9rImLmurIjCGI3bTwKUZ7y7IdWSdctDoaawPud5S3n2USqA3zDP6/pRNy91CZ+WYHYQGTjK3Ag==","shasum":"1cb24bea2380608ac963d3deb28dd364656c7329","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lYHCRA9TVsSAnZWagAAVCgP/jKxYk322CNIi0gij9dt\nmTawOSrXVQx7mAHtQRpqKCDRdAYb3hWHzWoyGt/s7Uozj76tFyzbQ3ZVa+BG\nwjvAX22K2ByeIBnuROVMmwNmpnycsbXYVT7mB3MQB93E5x/K4bgLNXg0C1WR\np9gx9/InVKFWaPuqQo8cTijm4yQ5vNh6G25Tu9d13T+oDcOwQeusHzR49YH1\nvZPyHnrAL3s5n7nYDTcDVcpogEOy1GLupPvLXFu0XWG0NnGC07p1xwPyfRGx\namas94RzVgqDQPXYliXKLboRJOfzj1Icl53cI7zbkFXB2Ks0IFSIYX3qQq4P\n4YJV7aJQxczVGlVlcAkMgkaJrvDszg6TUmK4OFvy9/N2U5sCkRNNjub1sxwT\nHkS8X+CNXoeWBUI02sd8sf4CD6lBY9z8JrlYOdbuMhs63rcmF6u6fB1gsEFa\nyczoGKjvce4qSc7X7gnw7vxHBB6fX8yf2n46cmxnCb4jhO+tRnZ4JKEiSxIl\nNobbLprHoHHK5SQ0m8/eb6dbjlpRy/t5r0GCbWlTZKxOYQLc/SY4jX0Vaxbs\nzztfIYAjULZvpHjujycfeCd2xROfAao/X7RHyMGr+ouaMcZYKSBZhr9s3VUl\n6Nnij5YVH9+67mGQEv0zuSBqgPLY4kViDqC8G0I1i6/HYoPDN2LdukndvHYP\nTOBg\r\n=1HeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGe/U26aZNOSH+90KVJ0MJFoE+sMhkMswUpphnC24AveAiBkOsHcpVbS+uT+gxXTSBhqHPnyVsRK1KIuLfjPleYNGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.b62f901d.0_1624659462801_0.7568815648905143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.73122cba.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4c80072fd.0","@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-button":"0.22.0-canary.73122cba.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O1iBtjGMABTszA9Cp1hNQbE3ySvQFFZd75VyAB4921Xys65okk4gI+/RJVIknNXlxKA+GItsRcak6NTuY5SySA==","shasum":"966c56c3d3048f4d7fbffd8db728c2ac353b44e0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfqCRA9TVsSAnZWagAAF8AQAIV6lDcU5aBrdJV2bYQ/\n6tlWfgN7/Oom/yyXnMX4rYnpCO/OaY8b+L+UU+loFn7M1Z9xWyHARtpsdj3A\nVuIwolAqBaQXEyM7SbJwh2r9cH9arWdPq0I5zbKumc2A9KrIZHgcwoDtLVy/\nXDDwnrW3hSzYsJk64BsH7M11FDL5Jv18ic3lGwdipCA6vQR9yElKNVIEXMwC\nT/o+YWNiF0zMZ8/xLxKrrGA+e+hKsqKuvt86UGBSnk849AxPR3lLPK2BHydP\nmT5saGzeXxCPUByvvG2XXvKd0zCnYChNSha0bGVEfJlv6arfvce6Hr0s/Dxq\nR25oIer3ztlQpGnYgjg06LfpX5CJosNYtVATxlGFNNZlhZIGITNR7RQQ+0p1\n3fg5R05XBwroC53xuvWNQ13qLphNarnsrKvXGgw/Gy8kUZYb0Sf7yVw28zPt\nzP5QWGgCAuCIxaEE7gCKEYzOAO5E/VrhHEXkXI5M3xhym+NMATXESrNWZ4hw\nGzLAc87f2XnphbTMsnj3u+kBAAIZN52q7r20IQMj+2dt3vOVXYYf2Jjb4PWN\nxJsfDLxbnRB5ouJk9/MCmjMn1nHWtOcdTahBgg+qpsPdZvtUBupzMvZ+7GMm\nHpRX1lRmW+/CKVl5rt02moCuLljDWL9b3C00L+ng6drNtO/tc/aWsYUahJ+d\nXW+/\r\n=6qyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9Lg6LrT0cf73fJZs5xHRnuK52BkZ8B9TNsnPAAgQJhAiEAmsiBB/wP+GbEmuWWm2BRbo8tHlZ6rJn9W0IgdD9cZ78="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.73122cba.0_1625081833728_0.16120840727536456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.a6912af5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4c80072fd.0","@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-button":"0.22.0-canary.a6912af5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-REhw0qyQ2VSvFIJeWy98WH7Iz7j7tY6JaZ9pjcIqt2N7PhDKtbKeU+hNgfNEHMK7Z+xKzs8E51q2uGPIymplKQ==","shasum":"2442def2c000d713715d4004fe496bab24307864","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTkCRA9TVsSAnZWagAAvYcP/2WqQfeoYPMCDaP0Yqfp\nDWEtqHJS1zlNJSDJN1UbYbOoipQYYjqWWEGBrd4F5nisMDKD9RVaAy7qBI/v\nhrHXrRZVnggnOOINHzYnnzSOBuB2jeWZkEArd41fJO2tYkyxYqY+RQZ8xMUI\ngz3MXuGe3zlXvFi556Cy2KFaPumjXTFOGMhiyhCbWsVFceOkA/PLwKv3+hZ1\neuAwwMUYI10qMfwHpwksoSG3JdRk9UnLlXPE+cE0KOmuWOVvef4ZMjAQk0Be\n9/Gg2R4YNME5HCBnNvDM+sKCA9td+VxoSLiUnVnEczlk6sbSxJyW4uY1UflF\n1ckDfH1R6GMLozBWdwFqaQQPlM6qWFKmpJ/lgXuPVv4uyNa4QGpiLVeANiQw\nCWTtj8sQRgxFsfA+4xwz+Yd7+ujjspSG2+zfKu9goYNcq8ufYd1NLk3fE5mp\nZDUEAKl8ff8g/nQiCzmsdMwwffjVCj2CZ8XQW4g7lVmW8X4z4PWuXRPhAzrk\nJTrM3ZY04biPLUG/APoXFXVM0ViaknuP/hQkaTjQF2t+7/Au9nfZLGiMhGvu\n0unB2BOZpGPyFb6a02OUP59BUP8cvKyQGkn+zYw0auR1xdjM8NpoCd3paIlb\ni2AWwMd42RUwM4uAWidaV6AukNe2RTsIjIDgUwEzB+VqGHVYlonudeq5AdZ3\nDKyo\r\n=rOaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvcKXMDacm16vj+xZprjLf158hGvPAv5bUHiQmfhCL6AiEAt77hMhD91jOJPFtMPkmPSZ/mAhVoredozF4Z6/hHBWE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.a6912af5.0_1625175267933_0.5628755389624747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.134f24bf.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4c80072fd.0","@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-button":"0.22.0-canary.134f24bf.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yVsA1EClDRDAMpT2oAbshJOUMYcYzVQfEdt60HOv8haNMESqef6nSbgtZxvNtj8/r3uXiUYuzPgyklEnfifsAA==","shasum":"aa6eabcb5d3a8ef91ea71bf6be328b045a15cc14","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKKCRA9TVsSAnZWagAARNEQAI09UM4gKXgAqZsGRQAK\nHb2TlvoH9PmZVe6oZ+KVoPdLS4FUB0/mdOuHO/EwSLsPaYmLpbmc1nyPlMX2\nKpka++LkZeEbIzStCF7JJI/Z4t7GVU2e6l9rkdDsnZ6nnQudhuXXl3zT0UuG\n2rWbC5HsChcjvnOT+eK62PzCqdyXL6omy7aGtRuuNbPJ5qJox+SQyC5DVtQU\nPhrUhxgjy22W1rv6QP8Mc4OTLdLlP716hrtoTZNMs8EmWqvTwlGnRRX74kQm\nQoyDb/LHTaOFBDqtscTct635qEg+fr6tdxxltJ4iykp3yAN3V6JWNk8amT1J\nsnU4bvvtfiB3GRWx1j92uuIM6QEos6jZ3bjl2xYa29a8Tu/7FdkVMo0pyT6z\n/m2fUD4MiUwWxdjLfhZ5hELzV1PBSmM553YoEG40gyWEBinZ9OPKg/s2psu7\nu3MG6X5MjRqykok0EoXjwWcSlt/rxS1TcBS8no8cOc/CQEfaY21N+HLHqb27\nL6TPsESN3tp0wXCeBCF/hrH4ph38yflvrDzNYg9iBx9LTsw/DAf04iMvAyyj\n1M9xMgbpzK/nZI6zMaah/PRKzNBJfsxA3tv6w0b7wB4cGqNBAsoSV00aWUsT\n/3mbQ9j/5k2I2MF9uldXLMwrJZemmZWipc0J2RkrWvvMk2ThTCowvqAxXCpk\n09At\r\n=ISXs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0OQq3dpVmOTEQxJHa9AYyJafGQpa2jucPP1EHKeegSQIgdK/AwB1lMJ4+QK+kFzCPYp2SYNsnWCS3r/X9OJIGGo0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.134f24bf.0_1625178762081_0.5705829732788075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.1debb78f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.d0f9f3f2e.0","@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-button":"0.22.0-canary.1debb78f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FIZPa6BfwgJ2GXRRzpsh9gSmJ56O0mSNTTRZRvrr410tfypvPI0BALTV6yKh9t/nT1t8FbOyR0e3ObYQz2qVrA==","shasum":"30355e85c87b6bed6a40d85bf1deba820ed503a6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Pl5CRA9TVsSAnZWagAAoSYP/1H1rNYqjAdgQnPjc4Yn\no9VA4TeCcjGIADg1PcE/PGv2j5QZ+MNIPwiuFsEfHJVUh0mklXrjpcfesKOr\nq1289hIuGrKmpGZDU1ccF6VSK2518Gk6uyBFDAEbo8iNyXfypx26APAlu059\nnPf7JhvLw++8xeg3oLrfZcfMqnexhQf3dk1xKshZwkWGmwdChGboNukt9/KM\nkacHEvZPIbkXKL8tnZwkGwnkSfv6lnPRTVmjw/3uixNf2VETv6ZuAc4zHflb\nrDoHfLeQ1rTzJyHupJ9aEyaqsTbf8vhklufQPPgAVb2Q3sqA5KjKqI2rapw3\nCgCT6/MwPmgO346LjQstjWxqNCOJQ0eNP0FTO9zII3XfFtEtvSoJcr/v+S0/\nhGRRYISIqOpjY/FAiXFSYNHmvx2E5eMrALIOA1AW0CbR64SKg08mYqFt4P5a\nqeTPUVc8Ymujm5wLxvlH0i4xNTEIUAs1slfbZ3HCbcNPu16x3VEQKDdCA+aL\n3G2oNaa8xds4q2GjFiXisLKMnLZeU9+BfSSWFOoQAO3HGOt96tCOWdQq9AKJ\nD5DIPwXwMqECEK7zjPDHPe4Z9Y85qRbNpIkOtL3OJsKeSHG4I5ZI8aPveWiA\n50/Kg2nvTId3FCeq3o+jvbm4pkTUjN6N+CBbEXrQjuBGMRy27FIcKQmSPKxo\n0zi1\r\n=GUyk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+SjncV5lzowTaXKJ1sbUhjwMv7y7dw+zytNclAR6C7wIgee6CuwUZQGrxprcirgTwT9t7h0ey7k/pl0E6EkZ28zk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.1debb78f.0_1625618809150_0.42494753515201444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.d53edeb6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.d0f9f3f2e.0","@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-button":"0.22.0-canary.d53edeb6.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DY+tT6m49L8/3OXO+ylqYGpVjx3kNnU4zASTDNpAF5jTgQ7rw/sUEyH82UErX7lvFkZuBcOt4XcseEZcsaCZGQ==","shasum":"3e24dac5c5bfbdba9bff2a92f16e34b0f31609bc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d27CRA9TVsSAnZWagAAdTkP/3GXFfdm11Ti0+5ux8z8\nMhH5R7wTcvVQl5+E6mXk1g8+iy+OgrF2zu+Pn57WDVPlLCPKFU+JjNsFmOrA\ndkdZfxyZPkoIfnIZT7j0+TCMd8Im59BiJrE7wEBgbJE126zU9n7xlLhE2zsQ\nh/Zsq3la/KX/0UME5NRvPSa5VALHHjjQq+IAqzgnyK6/gfkhVBW5Vn0W/NJ9\n3HQBvoNmWWz7qfSGoreivmHWowwbcOI+TRiZAD9Fwgmyc3y3L5la9D+8I1ZS\nY8CG0q0aeqR9ZVMnRkqx8YqnmzVm4qtvQbeZVq45ocDffv8ZxcgXkthyKhil\nrwa4tQ/zv3rB9+1jBafqU+RpnAtxnxdH0eLbnqAkLqOSox2U0SpFlT11JoKS\nMYwVZQtvwx7w5150ChbS2XBXeKjxPXXmRA+/4q5Q/PWbwnNT17KrdWY88QjH\nJG7KhdMobiCEnN4UQb9VD3h8w1sFlvyU8IgejwYMf2c6kpREICgjssmJA85K\nMmis0XThOU+KkfxAnq39As6IK+hs0yLIjEQrCkRhjYs3LACZ+KQ6ffoXvdnR\nl3b9JkGsHE7Cqc3wgTJ8EilXJ+2TLQnHsqteUw40711rW+G2PZYTmfz9Ujwn\nArdIsKSOCmOfsVmdypHNXBm4lsyiDB02Bsc+TZLo3OR5+aE1jWPNdOn1TQv4\nkm98\r\n=J3Cx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/zOAxw/ZLlbWJq/PCw/6CCW5bElwjWnOFxodc4blvuAiBlLAYu+IiYEiM2pkfPWxpv0fpJkv+u+4VsjlUD5D569A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.d53edeb6.0_1625677243364_0.7668965731470174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.2226489a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.d0f9f3f2e.0","@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-button":"0.22.0-canary.2226489a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/ZgSkvZvuIWQ1JBQIJq09Cghov8+XlAHDmpAjOg0jR/KG86ZR/0v6S8lBPabc2ijAPiDC1mOjPoWgJiYW7P2Jg==","shasum":"beba82f1a280242f04d7808621fd22ea2edd5ffd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2UCRA9TVsSAnZWagAA6yEP/0hS7TIIsK0J7igKjZu1\n4hF+bn0plKGKpqwueybJ0hnKrstok8U3RQPVRZpzbEK72HqMqeVXgR6h+E3D\nTrQBitbLIdcLE6Am6yrh2xPC+CAlxgfOOj1NcaAr/EcIKudn6oQhgbYKSsTb\nOfUD9H8mxDZnu7VTK03CtH4Bkc+sF5js0ZnxtrqrxP+ncQ1wqojzhEeOI/dX\nTuLSElDKYGWwX2L0qA78ai8FSzDgydBSr00RboH/d4rNkaTlZIawcRjV69Ti\nsbf17goFCxLXocMDgiaB8h02msI7/SGp9Q7u1wzOKvJzzEVNmXP8po0a6rHb\nwUjoRbvodnr85QlmPOiDjwLsznDfGfnW25Yf5wKkqleE4aKLJkz7moW8REX9\nnNU+/ZBLAkTDRWyYkFAUHH0mC/FMSVliYsmzYEMXHmztre5xMbZvWCR9VVpi\nkR8+LKdYx5zghRddPPIavS2oI/q+iXybHob2VSt8WKs2YB4XvWBEPRLjYlX1\nNkrk+Q1AEqk3stMG+r6uba3BmwqDdZK8cdwYE8SWRGKzZYcyQKlWs74oNBqk\nG5fF/pck4bXLPEzcz08x76tDRnNjuDFNrCrcnifh65Q8MxvBRKua7/PfvSen\njXYqIiZuy6n6A5YPunJKHmu9DlNZm6nD8IPvH777HFMfYMU+N2L/0RZN9bqO\nB8I3\r\n=Q/Bs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqcGmgBX2TzlSQd6XwzmTMHM/ya6WuQLGCxMDHlqxlLAiEA3xABxWkDsyvbmx/GxN0Nof3Da/44wqFKzYzyTFRIUYM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.2226489a.0_1625767316135_0.8626080773765474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.d4801c11.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.adeac0549.0","@material/dom":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-button":"0.22.0-canary.d4801c11.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.adeac0549.0","@material/feature-targeting":"=12.0.0-canary.adeac0549.0","@material/rtl":"=12.0.0-canary.adeac0549.0","@material/shape":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ytq0AcsZ6ufb0o4VWPBWl3+5tBWL66GOesWIzUri08bjKtavE7jeQa9UF7CpUSCcLcNDXlh0zHGsB871fK/Www==","shasum":"1e5240b62b6e47992344831d2d17efdbd63efdf7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51n/CRA9TVsSAnZWagAAZtgQAISHDiQ4n6IQx34R5L39\nDYuIRSPSEriZIeFUi1xEBylDy4uOGseiL+gcq99AZ76Pr7dlhXu8Sph1VP05\nd6epE+/HPVy2qoGtNFjksc9urnCLU/5DjxaemxpDspSSRykdnz+Nd7fyhT0F\nl/i2b9rfyMOD3i4GrUdZBx+hZc+g6SB0toHwM0DW8nvYU38FH+tsbaU5vFWU\npJxzUJneJvjWaOx8V5/JpXh4YfEoN7OWKPIDpiYeT3aPwbA44YJyRpzw0Z/p\n4JH/9vyvZi37SDeuQ6Xbv01eKxCnjw+/+GMBB0j5dlR5LFXl3NlpffehRSoU\nQ848GmCN12sVuDt/WrHYAX83+qOBgkY/w5zeVTcRz4pCtM/MdlTaNKGeWngw\n0ZndFEU76jI6vnjDwgfTlp5XddOOdncl2kZpEvqnB9S89Y1Jn8eoXkE30vfH\n0ussWm0amnK7FmsYGjaJz24mAPMPZ5V3SeDL85yDg84DJHWRisqYKErecQ8H\nlL+GgN5wxC5dfp2aWL1vTxz642wMhJE02NL7DpvLQVhJ8RxJs2HTp7wEaJ3e\n+KcvtBP6wCRP6jKWBKJvfL80h1OnzkK4phf1ocsIXe+sXs2gAsNT6pr2O7wu\nXxkt6UkDFTgrbMwM+cMx5edchvESaLgP5JV8CBURLubdB6d9JcFE3bhh/7JP\nAUuK\r\n=Qwra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARhN6k+JJGtkOBJA72pAgqibNg3o7YASkEZOJfGLm5OAiBhAZQ6iDO+4crBfjsWTSSHZI4oN9WfHx6VPwesyiJLvQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.d4801c11.0_1625774590693_0.9441795767589685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.068fd5028.0","@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-button":"0.22.0-canary.7ec5f2d6.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.068fd5028.0","@material/feature-targeting":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j0qclEKdgOZG8qmsIYUJPWM/p//JnLsYPTUM99OCWzXaDakMt89lkCb0o6pCyYtC2DhC/WEY6rPeuohl82lnQw==","shasum":"2da2f999c505a5652d0615d2170e4457796a2867","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkYCRA9TVsSAnZWagAAbwcP/RGnQwVvLNIhTO+LVvH+\nE9w03yJd44XWShVNDCyKVXZely1Nzj9Vw+lIL6GJTmf4IH3Anoc4MdPvwwFN\naGUSgrWoSFBzRCNtDhqmcC5hS0PMMORbyr2mBaECv3Nb+csOejWSjOSGKykw\nLIfl+NsAKBTCWr+FUu/YLHSpQuuUin0REeEJ6jav9R0YZx6w/duJTu2lZGjE\nbkppv9Tbu3K99GfymBMZlf4J2iN6AERYi29+40PNiKVQOqXC+VFE7uFeQYYw\n9ltrWUqLd8ynswLLtZc+j6/2F1/qyx17TG0gZ50R5nQh+ayNa6StMyR6HSNP\n3/UrKX3Y1ucZlfIINf4ZFbOrwzCMd2WtQBV4OL2Ke9ZUnuw0jBQHGvg2dTlR\nbiJCo4yduZoVdITdSLwdWhhvGl1yWuhO/EUuKG/lNLnQCxktGa3BaTvNpD2S\nakyltS8uQzZ535SS2WSsJAVDiBYHdyy3hd/Tae8pG6cYXA1g7cPVdwLTtcNn\n4ZwNqae6yX/7ZJYsWUUu+vJSJWp4RppMB/o/Mfy0om3H67Pm8SQ/ggpTcANP\n/SUm/WbUET4Ri+bl5d93qy1ViOWHEpHSyBSSAX5kRYfRf52IlXHgihVPpI+U\nG9NCgXz7oCQy63OzxRn6BEGP9cGY8kfpzsgdORQqytHvuP44fIXCzz5Xfkxg\n9SdH\r\n=v4yd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/M2LygE4eqgxdwcptPsxHO3Zun2RD/m0ZOZXvwXkjvAiByv/247pPSLRJyj8ufhg1wDGMD8KCVluMd1RHu8AX4fg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.7ec5f2d6.0_1626110232074_0.29989383195587727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.068fd5028.0","@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-button":"0.22.0-canary.86cb4ca7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.068fd5028.0","@material/feature-targeting":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WyOji9zV8gXJEXsi5upqjmkbzbHFGJvMCRjiaTIsCcKg7Id80Fc82/TWyBamVLydNEZUq+nyjClQ7JWoSmTEqQ==","shasum":"13e537516b02a05bb4a6ea907965b173db9c17d1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c96CRA9TVsSAnZWagAAiN0QAIhmjwEosNjO1bwn5ZhF\nRXN91/QZB+n5mVEIzD0w5aOCcTZUS0mLFqYakn4MsNR4XSDTux30qyU9t3nz\nSYtfRudmirKLsSkbCYToQz2WlVTAXu5rUHw0c/ZY3ppwUw8bTSQJd05MsAsu\nFB1cgQRgAF0FJ4txHHCA82RHUXbfUNRcmyS+ofYqotOHORivr8pqyXaAZHza\n4sPWiZl0zRN/h0lQueyqtnV+XLvC8JLHW68IMAcGhzdTv9sBwSxsQqB/Euqc\ncEDitzztQfHjTS/J1MtUQiLgRum7mhOxQylSoHDKyIC30EXc52XwrZFRIZLo\nUzl/COMYVy9SyGVGVTyJmQp0KFFnTtCBGSwCu+TShxh9bAqx3w8wF9JR58wY\nNSicv8r4phpDfMsvYam6V/bZWnKjFIMhhxQCVjLahjm078Gc4n1h2b7v/jp0\nrgu2DSyq4pDe/fqweuUGG5DCZc3x+v6wtyE0ZAgRXzhe+GwWjU3y2oXOPZp/\nr+C8RWKtK1wkOz2psl80qKt8yBfAIyoOvvMUH1QNC5MxCCqKuLCFP4JPHUTg\nT3Yh3sGkmOdDWrUpKZSWeAZINyX56O1nh8ps8sMf/Ctk2J7Pzm8zncXUlPdW\n/iziuVz749XT26Uf/0rVU0dMBYy200V7h45nnzUJaIwN2ag8UXueKqUSbHOz\nZFf7\r\n=wHnv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVMFYwMPGGhY8wO8Ew43CwTBka4CLzrUvvWAjXxNFRCAiBmLFYtk4AmCtgKmuB1KPEOXRUWcQe2ScSMzXQYUsUIcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.86cb4ca7.0_1626197882107_0.6609333406159041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.bc9a724e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.ea77795b1.0","@material/dom":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-button":"0.22.0-canary.bc9a724e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/feature-targeting":"=12.0.0-canary.ea77795b1.0","@material/rtl":"=12.0.0-canary.ea77795b1.0","@material/shape":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JAUBVtyYdqNXSPlsyYI62Hu2iXziqKJc/+RFD+ECkPS2KiIFyfD4pvSW6Ce4qxAJoiQVWx456KtAVzkYjSn2tg==","shasum":"ff1b85ab9d2e9cacd37563b70cffb7d1419a2a68","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6WCRA9TVsSAnZWagAAo9UP+wa7hLnzpRmVW3QCfuwb\nViRvMaFxqpFd/HgwSzu9IA1J7WaLhvSq7XWtRI9pATP/JT9JtDBiu7HEzBQ6\nyegpvA+DLwEmueCBvahTRUw5HpyZJHWi9xTGcvBtACNxHQWyd9qHwv+SDJ4k\nyRjbNuzDVK7DEUdJ+P21fcBLG7vn/br3AAlPD5EASflMvSnnmMHy36qXeYcp\nWr/G215oHlmsTnvFKAO9u6eGix0yYYOMyxO0QTCt9C5YycYMBwEMJkmQoiuV\n+YCzRM6Kc6+u31c6mNGn9EyW7+w54RlORqsVLDnlfCMIhveSRX/3Vg0xhXOr\nF1NwLgknwaFQmFsteU+cCR48dIIhP7D+VUxLxVxEM1ivIlSBpTXaZVUl5EoI\nwEoDXttwBwW7Pel2WKj09E9dEvyEZG8TZ13qDHAzXeObhpV0hkk+fAwfFIOl\nvCmwqclSKCyimYe/3UbHqLdknPey/168kzDfjvwkt9GPm9NPCXLG0o2DWOkl\neTkuZkXBlT86EjUkqUktwyBJV0dinqfBueiU19of48uGhqW2rJWGv3Wr5t2O\nuK0Ct/kUQInAGeGseCheVI8FhIA4SP/5iFgVBo/UsMO1PsHKutXFVyZbIAwa\n6du3HhO9H5LsepXxFNh6v2Kuaki27TyV6Wp2aOMowgKeWKOC4lPwbQzub7lY\nIVjv\r\n=rH8e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUeSzoD+ltit+UcC1NsLaZmNi4wCd176ySsUz7x+Oo/wIhAKfuReSKl5uOHs2BThUd3rPECfPllIZ7+aGigck0rV7P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.bc9a724e.0_1626201750193_0.7477134783298067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.7847b83a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-button":"0.22.0-canary.7847b83a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gDwwNtkQdoyKMCYkC2DEhWJNVnX41j4BoLWN9keb+CXxWz2s5vnA6ALOwx7i8UdMsdIcmEbFcppvcWKpvajPXg==","shasum":"609ff2980374b22dd78b65ae90ef5e214536d5b6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xyICRA9TVsSAnZWagAAjNQP/0zh0vR4APfbzd93/60Y\n67RWGc72rVK8OZFHXO5H5s81WNdRxBDxANCn6gr4SL3/yxHXlMZJgxKeMMdk\nb9jxVttUXR7wWnga4OLSfKjLznfd8g75UoME78lYS6TOjCIdjbijjAPK+xrS\nGIk4+FxdhffrdTZsfsSDYmq3MepBbi5xMMRcE6ELshQNv814amGKxUZdazen\n3jMcu5ezV5Tr93U3fxdOwJ+weJix0mAl9PMEMcRaXeNymP8auxfHVI6AlW7U\nBZOtiUCbiWctPVCCFu3Sp/A5sByANZkeDM06kU7C5U1js7w03Ajd1uOdDVSB\nH1+SikptdGHbDy1cQYFknki1r3AjdBbfOdfqhfM94YXErFV4Y9wWffZwAMml\nZxG/di314zebOwoq5CTLRECVs2ZgE1me8orKMaisR9BmkoJykU2HE1WUPBV0\n2c+GCy5mG/5a7U72AFhtrNF4Y/N4um+55e13aYAud0GaEW8EZTK26EeftSi6\nRVFc/Mz8RXsuuDOTj/y3o+gk5UCCN7t/UBEtOKkF6zlpGf0ry6GV6dF1tLaW\nlVhiGjNHKLQtxB/6AIyHgoZM/ziePRaMET4icykFISp94/ZoD8xKtAEjGEMd\nx9t436m9Go9AL7ypz++EiKgTEw/K0Lpw3ET8P8mN8/o8Clo5Gdm4IKLuOGqa\nZA6C\r\n=L+ub\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAXXksz0QfHlsfR903i+pKGG5RE7Xk7H69xoHJYoF4GwIgNSn2/SoLRLpRFF4CIN0obGRg2H/xSuZoAmiYDG3tm5Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.7847b83a.0_1626283143829_0.1947861688067436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-dialog","version":"0.22.0-canary.8cba18fa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-button":"0.22.0-canary.8cba18fa.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HFxWHMxUNCMrZbBxQBvkYKCrseK810sanFFzQDCZ7GZ7ZEtcIUM36c5Gy1pf+GUnFZrCsKeFjOr7yL3yNCD77A==","shasum":"ee5dc184dc62ec3c891f9a4ec8eafbc4674c2a94","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iVCRA9TVsSAnZWagAACtoQAJaLVdRB/NHJydbOdOcX\nNxgbCDMGpYVIzBz/J3ko7I3g/1HezM9Q1OTfkvTrjdG2dgF2q/kVEmdhWwzS\nJ6QeanB/jd0rXKTzF73mJf8mh1XLTk7OlEqeFB0smN/OsL5Jgzd6dm96W9Am\n3gKp5t1HyU2XESu5JG3zJ2Macqx4wWJJ42AzDUYk7mqi+z+K1wri+aVUAcN/\nLSuv/qMSHI1/x+GEKBoqrnc81VSRbFf/U9iysTe6uSBfxpi10BaDQt3Onuqn\nu7cP4VrYC7INv7E855qJDcOHDJgqPpKN+3qiq8LcPXnbYET9sX7hmd6Bbm+A\nFXqM2WF+t62Q7HLuOqW89rEncedvpTRZU8uQygC4ql22VX7tXuzqNQP4U2lY\nVlyeqHOhf5q4o9gQzK56uGmSHMI4JN0W6SdQ8JaSUuFAoETaF+ECR/FUunW4\n6iNuKh/RjwHeEP0EAYpCz5om/ueeZ5SaHaKJugNKgSMyDYP4lgk3HHX9+ugy\nrciLO0ZpTmJ8KZ8VIVGNYTw03CuAxEgFENSh9K1/7nmfvvNDNQf8aEtVzF3A\nQk3zggj0q/OM9YgNtNFyq9ErR4s4nbmEXWA0WYEg9ZxSH3nf5fWLp6j+0FP8\nfep2Jx54z+oDYLdLQnouj5Z2io3XtnWScVSi5g2SdWUFXnLPfnUHQ/jw0Mvl\n3vz0\r\n=bha/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeyM+IFLFo3devhSjF3DKlFI/cb+9GSnuOGJiHbbKOyQIhAOz60lq9itu+WFv6uQ1WYMytGYYBYFjHvc/i57crZc1k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.0-canary.8cba18fa.0_1626294420772_0.9081877230312796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-dialog","version":"0.22.1","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/mwc-button":"^0.22.1","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-NHHtsled57N2EjDLelEN5YeJSpW/PYxayA+d2B2zpQPbhqhl//VKxJ9fA6CPm1uc+Cvp2G7lbZ2oUUSQivu+Aw==","shasum":"cae750ae4bf7e7ad0510c03def335daba14a3152","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.22.1.tgz","fileCount":13,"unpackedSize":107951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rRCRA9TVsSAnZWagAAiB4P+QAaCjXwh1us/0aDb0Qh\nMz77s/ZQLvN3P24EyGdFdtSYGufBDEZmpxHbfpJlyfXuhDoVDOulboqFP5MC\nu3UgvK2Q9oWqq8IZDndWVKz62ZCWUiuCQ5jDc5XmsZVm5iY9lvB0He/wvNqP\nzw5LsBtsJEH/d5vWjIbAZAbgsj4xgpxmnzA05YHwgj24L02CXjI8Qo3Qu7cm\nBc1vI+fBBxBid7yJ397bU7aSj69q1DwsAtoWpf+xkVOqind77Gji6yaOgvAB\nnU13Ydp7LI2KlqId11PQkpnjU2FxfG0yPZm8oZI4Yn9QpAQFsw59bOsnjLNn\naqquxUMzOTcA0jEsIHvxQvYw85kTFkLBYPoysUDxGr6YO+/V0LmqKnADWvI9\nF6S2jHdsbs7ugowhZkdrclCi4T0+ZRkFCOSVM6umHvUb0s1UAHkHp8Rst9ep\nQcJ+LDOLCi+dfY9dFqQbR5Gos4X1vgCcjKHGCPG/tfH+YERznIqvhDFuyEdy\nH0ITD63+0FXUKR8oKZWM/jFPIYxq/XCozLFdcBz4Pnr1rFFu0qy3NyhOTi84\nji2PCNUZ+yLYxfoykzUU3BRUqp1QlQZo1qRhUz5IXGvMj1yBupiEoqnLwclX\ns5a3xT0v1O83GVVho5Q26/GWGzij8ZNAU+jCaJ0cgiJeklbpNK9PNPBnjdbL\nkqlm\r\n=sAnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpkNj9FKFN5V0d67byfDUm53anwHv4zbv0257bUVUqRAiBnokXZZvgKHa0HsO7lRmgCbzyFVAbpW+h5+0afGIU9rA=="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.22.1_1626303184692_0.8277341416657786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-button":"0.23.0-canary.fbc09b4e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-142hHNF5NEEi4hBuLA7bNrG5xgtFPSe2V0VVI/3zRcbDK653/oWeiiX/NlOI4qXUDJPQWZvlaEfbvpvyWlXNww==","shasum":"5b9e181e976fbaa6908d377e0e2f2de770a74c4a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72soCRA9TVsSAnZWagAAVKYP/2LkDs9j5MzsUoB6CcUm\n2nojQ2iB1jZCiOql3QLxisMD9H/lfs1aD2cK/Ht5WhzIB521IkgQhy91O+G4\nZ7gIi8S/xxE32oiEPKLaGTz6oxYFFknSNxF+bHI+VOb0aTqYtQjVu4Ud37NO\neFQjHNUupwDTcn1SIPvNnDwi9s6+w287hPaMr391U5NChBpgMW1FDSq19r6+\nTWOU7VsNQnR1VhMiH9Cj2DxDBaerazG5W6XBoUg7uGt0Et//hKvPWAWZW6og\n1wLi4joeQ6PtnC8wmf1qpsex8bAGvsbGvJSt6M8aZA2C1GELGzMBaDLBibGS\nkXiGnDqexhWzN2SiLmUQCaIMOHUNiHrXz9q0SzYN+frF7YBppz2p+9Kt2IFZ\nfbpCxL3+y6/gXMIIkxB49Uo5WaO4b6YXUBl1PZEJVCTcxE5psCBa2L3zGb/j\nMxfgN2HWiH9rCIb4lnmhyq9ufBqCj47H9NmoURkNxjh/5L1Pk5CYc2UxiC6v\nQltrNe3QsyH0LXIRUnfeiQewiFmep4Ury2Pjo6MtZd98cd8zV6TVGLlEH+De\ndyg8WcJ0rL2FtAWe9sqjULQvzM2O9+VXZpEGoBciYiU4ximqMMleBMZXwxvi\nViW18PzOusfuw9vpvKdhMUeXFPT8CcZN1ypKOfwnhz7xiApSSGU/Pk+TUCH0\nyy8Q\r\n=MTXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxdxoDz578Keb4GO1rQ6aGXk11LJ0hZ9f5iCNv8VULAAIhAK6j6RQfkYtX5KjiTlH6H4eVmE2Eea2KlBxPxf8utZMN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.fbc09b4e.0_1626303272260_0.08568211003889714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.73e9f83c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-button":"0.23.0-canary.73e9f83c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/vDC8RR4m9nXfpDL0r2RMj08eUBaxRIQChfoek3Gz4NIxy/Tyl1iMT60HodYeIbck2/pwYM8HlnXH+hGc8xdmg==","shasum":"4d98ed5d39ec6fce9913b32759e41196bce73a83","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0dCRA9TVsSAnZWagAAELQP/3NwzrPDFT086i8Xqo2S\n+WM99/yFyvgnMR/rr0bhoyJYgIjycNk5j6t1d2iXgBP8nr5uV8rz8Fc7tW35\n1IwFqyZ6GxbQFiJpgnd1/5Ot+OH1I4b3Hcs8VT7XczN7ffNgxAhJsl+LiRq/\n6jbsY1m8AQUGT1a1ShgTnNtYmV+41D/C3lJy5O9XZvW1pgjHKCVjm2Wx57B8\nRBfgF4BBPdpoV1yJkJmDDHbuOwLV9Ys9pa64tX0J0lmwsjYy2j9pZMcIib17\n9oolB7GmPAtvE3CVHPRjKRM635HeBMZKtaLGegDr7DHTOTDUjEypOLAQ3d3X\ntiGt2srDo75woTmwbvE9KBtphJuSLVNREpn4Ud5aenNLDs70d/DptF/IlsQA\nChSbg8YVtIVXfIG3rzS9QP7KqsIo2t8LSkE6aK30i0SOKNmvK5hPGBnIq6mK\n5NYN+D7CxnkvzhUlji2cIaepYglr51QgU0VyvpINlL21AqL1yAZE9wioO7Ug\n1p+axyIdYqkk27KnnKZW7CWBA1RFcs3dewL1NACOkKdvAAnbFFIXwoaOenJK\nrYkiGvGE6IpAVgUZiomp3sBl9VtX9XAG5WbJ8WTtbFACwNPobg5dOvmFG8qe\nAPecOX96CTDtnglyrSNH7fHSIJ+WpW2tztBGDKipJzcAJG5khhBjT7Lwyt6Y\na8A4\r\n=e9s/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDv4zXH03gL4z3dGfich9zdXe2WAreHvz949t5dclHiXgIfXE1FSftPGJXrM/DCXToiLzlvWLuj4INSdg6FpHC8dg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.73e9f83c.0_1626381597764_0.7379314180321759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-button":"0.23.0-canary.cc0aa7a9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WNeS4X5mA1KC1c56y42UlFWOllBK/tY2TL/z8H7wnRZhIUXTbGOf7RQ0vUoJoz174fJkcwEfG0RCBpQnvGgjUw==","shasum":"303f140ed6f0a2abd41e9e16f60ea64543a04185","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLJCRA9TVsSAnZWagAAjIgP/RgdVFHZ8z6I8cPp5OSE\njaTs0siuRnzNw3/yyw9TYxWR3fU3dgqVz1To5phrLnFZaqvjQZHqUEVfSMZM\nNRrdH3DNTsXP3aWgQOcmOUKnC8QiD0GIvNgCE3Y4Bd19JSksChKJjHhMoMwL\nYZNmWjkhRKEL5dILrCa+Ir7DvJpAbiMu5U0GNNDq3TGbDb/lHjpyiCieiBCA\nwXsY5rmpWcveXNB0F4Gh4ecQOsKx5ho3eL1l8oCAF5ZnIUq2rgkbtwX4rA+3\n1txvP1Ko6h7h1KjnRL0S8gUDIHUjUhcZR4E/qi0+hPoNVXzwH7TLeUqnSzuO\ndhZxBvpO58EwSCeFIqm4HgP1gh00FUuxzwuWGR5OmxljJZ9qkQAkT7RtZ3Iz\n3sx9o4JGZuJQQFeMB9SctE0t1DiYyr+dFVUnuIL9VTMjw36O2t9uhWuGcU5F\nX6LJRM1DqbblQNzn28WvJjWyALHIVm7Yo4DptIUFJ8OYSS0EqGaRnJwu5XC9\nFJ9cjgxOolq0OBh3BHobyrVNJL62rIepNjrxdHj7H3fmd2l6LS9BwkjciiSS\nJzzf0ArMwZ41PhBDLLeOjR8ZMNOlxT1JEm2dU2ZE/+q7oGMvAdBWOu0tD0jR\n2xHZMizS5yIv+MgwyC3Y0/KyGoiHJCP7iIrnXEOWZEWksH6FYJwRMzFGeYDG\n6hlo\r\n=WrFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI8ivfIokeNE6EVA8NSLQRD4zvyox+fbofwCzymQ/ekgIhALO59iJPlq0yRfxpZiugu6VsG/RQkwIWZL6qdzuUpTDB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.cc0aa7a9.0_1626383049750_0.03323099360682602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.a8fcac45.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-button":"0.23.0-canary.a8fcac45.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7s+9ANIgN2TgksFL7iH6aiqxugsILXHFhe0GfjbSNsPF8AFtuuMnqfpGC/JDbC0g/mzBsOFouJKGCTCjtlKqFA==","shasum":"1e7e4f1bf7f6556507a279e3a05fac3b38ac29e1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.a8fcac45.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Kc2CRA9TVsSAnZWagAATBAP/1/l1dqF+c6iMlze2EYJ\nE9J2NSYL1I76+JOQd7EH1/Umfvg/pXxDNfwyNXIt1iXJkWE2jQkQz7jytQ1v\n0l0GjjWGTWrmppkrxB5GmAyfTjzdfX1DD//DaJHu8g+xD+vom0u0ddBKhfYy\nUPBipuzOvZwJBKl1gSSTl7cKWb2nIUltOfV16nku1MHKG0AI6INfOddKREKf\nsbnwRZdHcT43VXIYRB/CUgYxWvTA1nO1yRgQWS0Om1GOGV81Yl3doMF2FVv/\nrROQMqu3YN4bCNuG038DpzljSG4+E5YHXzQuFEedTVptLC6a/zMSbL9vT5ba\nifNb64n0yRt1O9flrSzJI9+3FrHL2mkQVwPD4WpfoSERBEzk8HOzMBRw/KCr\n/I3/Cs3xfAIUpt+U79RIpyWfnL+9FLjRyda8VxC1+JdKnT9rQ+98Ku1QGJef\nO1yu48DQsJkHXw0UlKjQrp8d9TPO0b5SkZ29tgjBOhO88TXJgacajsaJxlDv\nTj52DBd82+d5CUZqWqMMcEQNglg8VSzxaP46F6HmHkNEtrA6YofhvRY8fjgD\n5nsiUqcJ4+Pmr83rnzhgZ8c3OH9gRcRQ2jyvzYSMAoHbtiado6gDNWnrnjbe\nmr43bgObQs3iwPzN+y+RgcJtvrLlbaHGWMcK2veSiVjOlzDaCxh0Fghfe4Yo\nK5d4\r\n=DX4z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0Et2+ggTah6cxiauQZbPg2LH/BVb52SWvz9F8edo4bAIgaMvmknJMvyLztczkNNfKqqDBCzxWEVXqpGiQi1wiYcg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.a8fcac45.0_1626384182382_0.028059082302784866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.3ca580d1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-button":"0.23.0-canary.3ca580d1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FwtwZiV7Ux+jNHsiR4exOavBeUdLYjkf5lsdW6dT8UXbs0mAmk8dLWoAWMBDOlJaipuUBnVDjwvlVS9Z7FrUWA==","shasum":"e3341e110c75e17d6555a58dd03d6b4de222f7ab","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.3ca580d1.0.tgz","fileCount":13,"unpackedSize":108003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDsCRA9TVsSAnZWagAA1rMQAIfE1uSil45Ao4FZWkRO\nEfvB7vWbdbQsSk07619/HWxXgDd8tG4/1cghlAeNsttb8CZ6eAubu/M72i8K\nMcWLCNeJjg+jb+YOvMlwVd1+0ZuDRwdbLVIbrFbBJXD8WAjdY//kaVTxfBnF\nV4bsAVpr+zFLG9wYW3lbdBRDbgufQng1EjhlFg1oqRXQubdG78jpv2ivc3Uf\nDpz/8ADuCN2Tmxs73RnG38oqip77GlWe7dJnWcaqOVKQJeNYmXqt53n57dih\niN1YXO4xTGqfMVnFym0dSXxf22l25uIf5XB5Kny937Kp8VYBflscMqqMFOuG\nURcmxbQJAzwW9EVZ2CEiH2JdTzvgaMy/SdYweqQhNmWydC+ioeSmGHJLaK/I\n01jZ1YbYHC/+yJi67UHlxYo3Yu0FyOWiFrgj/r3YHRe3hAEyWE6QQVBizu2v\nEHH8xzJ1dMligryfg+scMlInARER8dfZ+W6K5MGng4X+2qFrSpa1QCSXwZoY\nNqz1HjEd12u3UBXUUT+IfmDbeHg193buSbNhEINAEYnzR9CwS3AMeRJv4/uj\n3y+XpAH4PWs2afIYe47n1XLby75LkXQmiUsJM4B5ZTDpnV1i+dQBlqIiew5q\nFQdgMzh8z/z2n1CaJWUEcMV9T5wzhJehOsw+6oQ515HrfymNtGkkqjJIjZY8\nwjql\r\n=jz+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCUG4w0Ts7NFqnEHoY9MiVdWUeyjguBui88bDe6npEXAIgFwxgB5svy+aWxRGNLpkY8vxbKTWMdlP4Ou9UD/tUoYs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.3ca580d1.0_1626386668190_0.01874768762633061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.22d29cbb4.0","@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-button":"0.23.0-canary.9e41cb2e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yj3JdoOBWcH2QICwhtJ5FwlrJtjxvW0CX6nSuXu9Sl1r2k9Fe6Ya1to0fVvly9Gea2wZ6WmRjEx/1Y0UlXB2AA==","shasum":"fe92663cfbff1725627b259f572c7d1dea67e1c9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.9e41cb2e.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAYCRA9TVsSAnZWagAA8egP/07DKRXiXj6OB4Rcm/ow\niwBls8BCPChgmPY4/a3i3f97OewFR8Su/OiWZphXZqL7HWDXH5gflmznJS3E\nh722zHtFxDhS4x/4JHxrILmeDNyAGH6EVbHMn80M3K+XP/lwVdyMcOQRALy3\n5o9xqTmCE88fCWIMBzY8JOskFULeNyEb5uEskv+8ObGb+VJmlEjO7sjCggCe\n7lOuy67TUMPFO9vxyDBM5/EFl8CewyxnTDmgXpuuqA2Dt+YkfdI8gyVieZTS\nWN43+ijW8SQri5LG9cWGlcgIxV7YfgBUNr8PdOjfuebbvVKftywkk80Hh/8B\naVitwY5Rq3NuuZvbQCeAIu7ZTdRgN+3tICVlY2GjHVA+O8CHe/to1DOQjiCM\nS+zSgak4ZyFTORmoqe9XQo8xlAuj7Mtms+Sd9/ijrlNF30puiQ560dR7kxe/\ncTl2MRqp1Jf4sHbknoxCZC2udFTiXWnYdUzqKHcWxnk8zFAnhZ/06o3q/VZ+\n8K5BF6hvZe0C3G2nbwbWPFbnm9/NUOrO4BVWjC/t9vVJEhbJhIBWbFZnuHVw\neKB/bYHgnZ83YhjVH2WzT/+3fE9qcporqgKAdLPYa9xzMACA5RATPPOKwSDd\nJwuQDN4pDuXceLfYEQJg0mj3ZkDemq/7P93SMRsqw4cxrvG1tvavAKJpgLTd\nOY8Q\r\n=cNGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ9NZkR2QkZB5/r2GpkjvqgV3pwU4EgmzorxZdVhGl1gIgXjyIPdGqqdVhjWGB9CaAGdzsqOTMrQjcqwQ3LAmxo7U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.9e41cb2e.0_1626390552656_0.6418762320834226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.c180db74.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.9f68a932e.0","@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-button":"0.23.0-canary.c180db74.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4AuAFjI6eFOpeWIF8FGMTV5ZPMbBr9LPkz2XfZjgMiQ65/YDr10zzwW0Z1CQS1+o7cbCX7QF6nDcm5pMChEdhg==","shasum":"b7685e15d4955b18124182e160151c293e35c86d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.c180db74.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cEECRA9TVsSAnZWagAAY0gP/2qMqwc69eqHBtHbIqtE\nQvIvjs54iM/reTIn26P8CH+qgAkqzBsw0NZOKioROweoMSutcTFxxZYsJW0x\nEi57Gu6kFWxxY2lJeZWvMIFJIZttwcx4nkDWdZj2WUgNztyBugTv+4ZnbS3E\nb77LJhSdzFuxHk2fG7HZYnsI5v5LW6EX4WpJCdAKZTChsI+La2K3lPPCNKmk\nfqHwu/Sa06zO4aBla9gl9aQsquzZaaeING6tEfjx/Sc/1e9gJfAURf1AEmmc\nW/Lo4+Xm+5/WpOJMOjrNwzJaKLkB7DE0APHT4Pz7lAkzOLB2j2dMnL1BIEYp\nC9Ssxp2uNOHgp7ggpWgcF87BYRKMtae+yTXolVglOnmLXqACixvoX++5INi8\nFCr0nSX5DqgvVoo9NioVSoPOmm+OlvNSKmIXZLS4ET2OPO9tMOtpLuN9Uwqm\nDqVKDi4S1H3cXtM3Gnv5r7kp4vmyMFBQCYAHSk+RHEaOZGheku9iCjL8ivWn\nled93bL1fGM8296l+1VTTnGRlCbvgMj6CsbqjNVcTlGQ8Dn6nlCJleuE/0zm\nKXQTQ+0+APpOxp2zK71Pke2x7C0ujSrMmEjQWMVuvd/h/bwITVQoevF6B2vj\npAj4IITkUTL6pIAYTrF81SGu+CBeES83LT3Nj5x0N6dD8hCqqdgEOoILnFa5\ngK3y\r\n=FeuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvXZthcFHSBuVsIpDKItZ/5tzlLgD1Mh1WxBNv/5QkFgIgA2B2o5bofzuo2Awm4TGSYRo6Tom+FXz7piLM4ikczeI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.c180db74.0_1626456324680_0.45414271571951437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.0d0a9267.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.9f68a932e.0","@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-button":"0.23.0-canary.0d0a9267.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ElLR5OF83SK6eSuSnnO+EtvMeJ/Iqi5VVldTfD66y5WKNVjEV4p3oJO7tLmTcvBCuZHHxqJSAG8UszopSF1s1A==","shasum":"7ff6aa803a39f076021885d58032fe5fa09e547e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.0d0a9267.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciSCRA9TVsSAnZWagAAyVMQAJ5N+T3/NIOUjWOuszc4\nHtqv3jrG7ko+OYCAjPFNwdBW+3j0wBItFEP+Bgz4zJo4Yz+ePH8uUHBz22u6\n0AFmnDcs6IiHLs2MIiBuIQmiE3ZwkroZm0TUzOq38PoKj8U7NOAdoyuiwZJa\nIkPLCs2MqJp1tuQoFiigS5DLvI4YrYHR5MagcAaeGyHRYDW1xGmFl9IQ5zOd\nAoI8PlweeP00wg8ZWDvLSTZ7mTRONtFcHy8gf9cvyQzKoubc8XXfb9S8TopH\n+YqXTWopP318XfKJBxkR6bm7zeO6j9pa9Lkcj6N+OKp6KNHEhDYM8jdcgbHW\nSUctIdSbpEB34hjp2euxfnB4+65zhQwTzWJkp4XRl0IvRfR634qLQAPNkWxE\ne7C6PrqFvamMri3FiS1ecxA0GnPCbLdt3/b1Yv54iyEujCcDZyyBBkr2oVUo\nJn3o9V1ZZIzpjjMznq2weNEvTZ7CqSeUzpnF0V5xglrj7AjpOXJh9IwpRsNQ\nK50oVlJPsrcA/FOudhovIRGjc0Q2dl7uILGjsQHK+8h7Pqk5lTu9rukUkf/a\nc8gy7algtq884zlEMCw91B3xcZQihYqNjguwi+p9mCjwRu2pr14ejja/x9Qe\nb+NC3H90OCTNZCL+l4hPjWoc7dNed1q6L8zq41U0rpqAGCQKd7W8Zsr4eQiu\nOjeQ\r\n=TkoR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4E74WT+YulIaB3Bf8zwNI+6l1CUOBGfBSMIp0KoWj7QIhAOfhIb1GjKqC9dXnH7H1nCwZIRqyaoUZVfJzaKAQ0c+t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.0d0a9267.0_1626458258307_0.003768384763656041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.d234ec3f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.9f68a932e.0","@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-button":"0.23.0-canary.d234ec3f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JXenmvR6Ro51F/lKHYW13PRiy5O7nCRGZ5Jrh3/5w4Jz1k9fOja5MBsm0VasfAC4I1MGJnvkUuCuvnTnVCmUeA==","shasum":"db03ed0979a8e487d38b92b8444be5e03a0a9bb6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.d234ec3f.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csKCRA9TVsSAnZWagAAGt8P/3uwldiVsZoZjl9/kAG8\nwWmN0i0BmyglqtpdmKdmP0SJwICilbhI0W8BGX7oi3MtEr9r21gghnbo/Xi8\nDHC8BQqkQigO5j/034VXje7Y0/JhhzcjA057sJsJk+7+WCjCfHL5bxx1OpSx\njYoeLJ9TMx/eItY9LNA59tE2YH/bjk7G8Pa9csCXC8SfQZUikog4MqhmTCDF\ng+g8/fcPvrCwuISxi1Ab27RRnBCCq89341jjie/gXam0CabAo5UuTK/OkRxC\nJJzRg/1gDNx2nXGs7GAmcqMUNWLmHrvIsoulTrh/Wh0KfYETPUAjvM3MVG8y\ntPXL/6Zlt6f22Q/wha1QObHZA7JdmNcxMwwci77p2ECrC6Smbsd65NnkkBAY\nRZfJgPFmFKHFZ4GzLMnnmCfrmpD1yVaKjykB7p4+JOtMfr1ADrqCOGBZCThI\n8GgZIaCkEY77x2M6Ga8cM4gBuBbFv8KLEQ6QBK2NErA/gA2xnpnxvX5outop\n8RKLTTwDHtuBywD/qFUpn+FluUy3fMQMtOEbjSBWVsavvK2eFUllb9nVkBHJ\nCuoPkhyX8NKC2+all7ExisiI46fNoWMkyF+Pe03ZSDyRM98Ur1ZC8sDf8G78\nzPrM9g+3S/cijuwO/kbLqUtsL1RZnCacVIIr7jrQKyHcF0vublANbGvIGeEv\nRxAn\r\n=lqki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFclYP9xbqJ0XpHxEgQrFZDyB/N/p93pQ0uVjXwpGsm7AiEAsMRZHRv+9qlYDj5A65qLmRD7rB/FbtcnYk4Ir/ZTi/g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.d234ec3f.0_1626458890488_0.8898327890819955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.9f68a932e.0","@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-button":"0.23.0-canary.5cd4bcdb.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q6T7Z1Oc+yjIPgJ6GFYkVh/+SmckUBOq/Jd/qURPSM8/Myv/gzdDPwGSfB4H7zMpQ+QQW3oURVZS7NQdR0fJHg==","shasum":"2ce570afc1ba198713f99e9f656b77ebc9ac2908","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fY/CRA9TVsSAnZWagAAiJEP/09AzxqanZZmkqTWcUgY\ngX2yV/cMDsdL7buqGnExLeCaLVNfhX6uiqlgESYlVUFTri7AC6RgotXuYZKZ\n9goXPPWt71kFKcvKrSTI6lTAGCg0B29MJr8/jqZNioTV919vlwNhMkYPtnG1\nsgdadCxxdNEONiOToZHtMo90yFhOh1SOMBeWIyWlExN9dvep3Kvj2v4D5GUj\nw2CyW0Nl0WhoIv0J2R9OVUxad/H0SnwAlCrX6P0iN6EPqnRdwSvuMp0/kQB1\nNF4KRmPxV87zWkiHXGu5g/FuTAbuCrt0Uw0MD3SyYazqzL0mG99ICERrfShX\nzJ1HS4wgv4ZwpLqT9S/s5l/CYX9dtQgWSm+1kFjAAdJdqNq27o1DGLGdkJzY\n+gWnkLsQkDGK9fgScePLhFvnFbPqeECkTA6KQZnrAa6LOW6GBLY5gRYebmAr\nYXjV8qfYLjN7Z+JkG3xcRomiZA3cgiCN3wsbACQhG6bHb8SGULiwUiygKbgt\nemSuvfJXj8SzDXRh8UmFilmTW/QWGvRpibersTCYwWjBTnjEmiVVmNOqZRGA\nkV0zmHsLW1AY47BKyf3Vc638iVvDEf9I4uUoVRFLqm1UawGlSxemADXZ423O\nfqJJH4HxINyZOE+J1sBOMx/y36EDYFgX0lShpZ5+WAgDQc+o1bLvaHgQV8OU\nanhY\r\n=KJC5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQbRvQFyih1R6q9e30nKg2XwMUoinFtyxrd2aT6COU0gIhAP6yY/vpiF++OynSVFsPQBbw446gy3rggdVrkzbaO4vh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.5cd4bcdb.0_1626469951353_0.3760304932144165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.2b133cb2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4d95812f9.0","@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-button":"0.23.0-canary.2b133cb2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oIligvGNPXmcp131y3uDzvuCjZaNTpvU+xpUqZL5oNwlUICx1KBoxxohzZZ/LtliLn469HpwN+zMxnjn+Pq7ow==","shasum":"c7933e1d56a5d0d97da8e9c4bcbfbd5e7892f414","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.2b133cb2.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gMECRA9TVsSAnZWagAAabIP/06H/DkHcPlrRi8jsTWD\nFB4qjayoS6NASvT1J6nUG/xdhHpkJblChYCqx8mK2QvZM9RCy5Fk/Btdvzcf\nV6YWJ7/E2CCeseNM0tnZlP1I7sViasCGq5UzTGdK06t9BhwwjGzD7VXd0yYR\nW4jMERxnVuEVchcIobPinG1p3MK3uCul1chuqXWOXDbbd6j1H6b6IocIUBiS\nNifF3DoEL0M58quTf8hJMJPz5WFrDJu8qExqL+ezFUHpGMaKXRi0fUp/yxZG\nGRlVobifc03M2yCTOiXsO+LyHB//zOxFS8YoNWaYmG7YjBWvxqc5tDw+iig7\niQfDu81tBHwqwAFdo6jVEBoT8bWc3DvzBr0zqjzuk17ZmgAxJOJOXGl4FIgC\n+vyZLcam/Yw0GWIcKAkICpZ3N1foYmkZ8ySMUn6eD7ILA3dmaI3p+H5g/YmI\nt9hQVe7ZXi9TnIcdbePUzITZnDLlgqfcq3+VaPlI5LOuWcdBxBfNWjbJD0hu\nfCZqEhv8OA9QdIHxDxDddFfLx01jvWo5oxbBelP9Y71YxfqpGrab9udtmpoE\ny10p/2VlLr830rEBLtXMyuFJjVcOsVecW3kYjd9amRPFLsw05lxeUOtab1da\n1iWD+7vhEZX9R9PDjESXAeH8KkhtLf5eay/0hBWQTzaX6T7pmLSZ6nx9rSnZ\nDEIk\r\n=HK3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6iCZpLMed7PcnAwJ+wT44QtU8b8Pbfgz+FUm6f5t8VAIgZ3ip7F5/2+sN+evL3CPAZevewh1sisG7dYDhn+mYI2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.2b133cb2.0_1626473220217_0.6270814568383021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.ae4f422b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4d95812f9.0","@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-button":"0.23.0-canary.ae4f422b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5UbJBVBZkZOL/Jei8bXbJuuowVm2/If1y81f5krUfoRCZZDG334DlfYLn3Ei6awXywbP8d2+tXfk67PBTAUOqQ==","shasum":"3bc6060530d1a4e2bd4a7652a895ec573d96b188","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.ae4f422b.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwyCRA9TVsSAnZWagAAtKUP/j1/TuuzsuqaG/pCLsWp\nF4xDxMkJ7NO763mu3G6XWd3XaO44PL8PRLYsKeBHNfpnX2BcaBwMIHjGs2gr\nb8CDJmcHCT8dXJutRYzWfoIGM4Sz4U7mJfDbTGZuRKkbQQjC0cedJT6GuwmI\nAaUClmRKEubMD8w5aP7XxJqnlzRNPAoxvmgRNObnyW7Z1F4ZzbRXdCH+CJ9p\n4/OpfVE0PhNIj4snfdiEqZr21sJb3T5btwMhD/QvNIw5J/VdeeRo8Bg1PYbw\nAGiCHP8aku4S/KXgBJnpWI716NJ21I/VUcHHdU2xfno0u6+sNsn7AfMokcan\n39xpBjJxAhzosNrNwT18aUS0Jzbux/Lqqx9ZtrzV2l+VxRPcecRz4P5lfoOO\nS2A3YSKMYk65x25FvYrhvB1RuUNlAQ/5GOjK0qUOFtSYzbt+FIkjo8k3tyjs\nRUejmrJO0O9eYK9FAa8cn/2WS/eObzf7ha4fXkSZF5oVgYk7BemkLhtrOepz\nTeZNDR83t/2AfXdoXtKVUYLPnrqOt76ZEqV/YGf9JJDgXXfTQn2aU297lwhr\nNNQDmdLmnK9zpu7RKowppVAqc1V+ZeGOYG4WEdS3N1a6NPBnpFi0uLSqUc7e\nrQIXKBZzXGUFYTtCIQkSKcg6PSwayMRormWC7cerJithdejtM32+/46j5U9P\ni3mB\r\n=2T9D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmlYQsPELkkoPA6ZkrOb7xkOFwE3YiB0hMm59Gvq+tjQIgdQbFCKTM65cIsMjLfhhMf/Pjh4TYZ7t8GjQpSi2079E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.ae4f422b.0_1626479665870_0.7582807690286337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.90ff8057.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4d95812f9.0","@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-button":"0.23.0-canary.90ff8057.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ry9rwzT46kkkqc20zhq9Ey5LrDY17D1aLoKLbZ3Stx8edMrMgkoB/qD4qyjK+YgNOV4aOSX2zs6JFeHC/AQf4g==","shasum":"d4f4739791367eb2a4a7e62f6f003b6c359b15a7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.90ff8057.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdDCRA9TVsSAnZWagAAifsP/jGb/J8dBP1s2TJHNZDT\narA1Vln7l/5g3XPxIV0pBG+7hOoq1n3rcPXdqJEE/OMx31y0ybB8wIXstwBE\n7nopV+Dz6ZmNXgQDbkJYeVSCpW5WEqE4QQhrYsWrj1BqDPuUTuzpMvuVxuwH\n5py1kw+HPFa1oHl8eBf+IY4wn8cYuWIiND1wxUCTvlzh2oaYiGtV8iR3OeKO\nI8lXc6rB/8DupNijk10EnVvyDTU7fZk4ZVRwJP+WD3rv52633Yfb0fEFpFWM\nvKaW3su+oEWtrnjgfYyFFc+zuonuL5AugmBrRd02hsah4oDbjcGq5e0hskUv\n7+Zw4FzF2s+Emv1vZe0ySTY9tjJIjVw4eBA5jgK9rhauy200MGKO4qloY2LB\nYbeC6RRjvujcd4BDPwnEv9kg1greUzJK3nlxLAa2A5J7n0/7+7lW/6TjYDH6\nQDLroU1KFFgvqSX6JNgcsLNDdHXnR2DCjpMS9nZ0KKCShHFgvrq5YiIT/1Kp\nAa93Ux1yJRWxjONnXeIStIpMbCp6nTuwV4LdRQnlnGSe9o6AkBTvN+/veucE\ntxbOn1d0uHS3R+pl1YEHt3dZt3mduMSANWLBvYxv1fMJ/y/EktIoUPimMcMF\ni13tdqF072pmTIG3nTO6Xa71QfPljdj2IIBu9B4XF+Kt/GhXALDS/geFkbvm\nbUrl\r\n=o7we\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHR0sckND6O9b62mQBHPEufAanDTvTHVuTA2FEKZ602bAiAhxZGO2Po7qNzMmJ7XaEUvtLx6+6uTC7JVl1LsmL84EA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.90ff8057.0_1626703683424_0.031861817972294704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.4d95812f9.0","@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-button":"0.23.0-canary.dd7b75d1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X6hZL1C4OhqlkMC68AiPbj4akUv+IUUHx+9cFMbKH/vVHaVfqdNEzGO1JZURkL2UvaIwew282veBeZXb5c8f7w==","shasum":"f07ce8587187b8d992d23d8a002cd85b2553f730","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.dd7b75d1.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buOCRA9TVsSAnZWagAA2hEQAI2Wc+vXG5apc7eA7JdO\n0OU9rD4J5WCpL+uopA6XGNsbg0oRVcjC3dts0jbUbnoLlXc4PE6gj7GbsoQk\nTtUkCHzurJxWt5l9DesWmkeUy5m6TAeIWXi4arBVv4tpqlZafH2iXN9WB5zu\nd/wPAlt1C7n+8moGkEhBxfMXbVKZLgLcvbfF5YlwYVk3vTkphZ0Vej3sACCL\n9Oi38VbSEx465lBH6H/f3GpLQXU6bZ1TSudZuBJjg37q1psok+G3nlGq6JmW\ncR72NgMSSljf0D9jNBd66R4hIBJWPpATpwAQrTuRdcYe75QQvwtXau0EY05O\neJKI8gARg6IROsfwcjNDuq0aW3loblqCj3q/QGQSXnoH7ITQhFMoeq5bW8IZ\nLkEkGlcyd4Z57KffTHexx/wojpviUwglLXfwKTlAVDkSK/TT8szOTllYVpu9\n0BcpH+XyxZ8qtVlEG+ReojJCEDqewSSg8aAaE6g8w4KB8Lx1cbBPSFgvvf2p\njvUizJrF/kAdu5KZbINT79QAUSaEkOLsRrsLNsbSAImVKvU2Xz+gNIWZp7bA\nWpCdbOknofEUNfNNOXXoyhXl3yVUfpZ/MhIBBB1mQ/ghqhgojRg8c4fSHsFf\nfSihSgLj8sJJFfdSc3XI2jnxymK92pQ3z8bOcV9Rou/H4LlljKt8Q1d70PUi\nvcqD\r\n=QbQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+gy6hikp/tWgthuRwLCOmqhPnr2vi5D2OfLv5HpoTLAiEAjuqlb6IuCcv9MQ5wo7WYd2Iv3OD0JI0kxC+juDxbDyU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.dd7b75d1.0_1626717070054_0.09046594126411156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.104debd5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.38d1846cc.0","@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-button":"0.23.0-canary.104debd5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/feature-targeting":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TQ2HG30Wso1NAzoR9rjCSH6AcY6fqLl5lCXisfKmIHx14lN0bQoeT8KoJUTdfotejAK2ygmeSYAY3dmbHaZk1A==","shasum":"a4152730e35bfb67a17e5aa3ab1bbea0d100e6b3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.104debd5.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKICRA9TVsSAnZWagAACH4P/j2ZTc20wkSw1X8wf1di\nRtTx1csf0iwZQYFFe6pTKU/hIZt6t0liFR0PZFw3lgWTEOje6mECHCyrJ5io\nrW5Xkwpcca3fxtsQxosetFiwPf6KmzC1y3IqaqfPKdeIRZZjq75S5d7BYuSx\nRC+BmCYuPzZ9JYwmE54jr5X6/01C1seci3/F41rL+k3Q0enpRyaYSggD9Yf2\nqUZRDEJb/l8yJwXKS8u5sYX3bHMPEKmIbfEKdc12AOQ0zOmSu9PWJ8Nz2TIX\nAqN00h+dHYG+OpW0LlnJniSo+fn/zAJTd2IW6ssY+X1be+9nS9oJtFMEV+ZA\nafMdS2hpOU4tvdege13Dh6hWMAViCzz+pkrsrKp61qRoLssoTyalKxSAPlPn\n6hW9kF2we5NyR3B5vOrpEcu/ZBSW8FExiD3hDXydGHD/vd6bXs8rVGTmwo/p\nbq/pTuFxsPeAsOiYdwegVVAy/C53CaNd8oK5mE/btVdLuS3QpOkx1H/YHZe5\n4sEJMF1nRHqB3EG4cecMdTc5aie6cnDPMhsvQ/2XsFwsHECYOMobFuq7wO+K\nyUP5hWWCS314jv9sL+JDzgrzcGCmMhPuu2fdIGK/aWeqQux3iSvUkmIzTbFg\nUMDbdoSlljURU388Tr3LTukPgSVKa4caV5qfVk57tOaL6A58jjzUG1D1rAE5\nadOc\r\n=6iEs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3KqlbFTSX3Pz636Qg7rl4XqTMfHqy3JRAcBBWKlwEJAiEAhfcW/W3Nn5ytNGfVQf4yDFpGaoSZwsF/M1C/b0niYfQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.104debd5.0_1626735240445_0.11914330977523013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.4612705d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.38d1846cc.0","@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-button":"0.23.0-canary.4612705d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/feature-targeting":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WogyVS1ZqgV3PMTnXlZ5Hokh3ffuzwiWWJPTj/+Kcdo0TJ+nm9Y92bn2NFtN3jyQITV3Pa1CKw/k8VxHOC7c6A==","shasum":"8eb97d0f5bf05df743b36869845c6e0dc7100400","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.4612705d.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQvCRA9TVsSAnZWagAAGhoQAJAc6GRLxJTA54NptpPg\nNUXDSNUhR3xjJPDh3RAyYkcBymZcCNm9ihQwp6cDULj7Os2vq1+4nE1k47sp\ncm38iDz2K5gSs4jJh0g423ZAhQNm68BeFO3B2pYK/NyJnvxcWsO+kyB6HB7T\njKGAqbfdw+LnIoX1Y0/7vEQtgRGJFyXn4OhKotTcmOWDi1ewoire0jWAK4J3\nOW5Zy47I8mZxGw+Pyq3ZAeVMKbPQ61UFLGjYgSujS3l+N7Op4wVSlBCX1uiz\n+hDbEdzQPXmj3fgGpHQco1bMvzGfoC9d5xgrCNtNA2gKXcAUPHeWJ/7TNHOP\nC4L3n/tyYUTupWJ/9kqmLBk7zNPKWzAZo/y5AF8ic3U7DhFpIS9uWrPtTV/m\nU9kHizH2jWxQvkN9DSFI9KdEYs/n0nSTKmzfRk18usqqnRLKMRdyuKkInd2V\nlwhvSejt/KzK0wPNcHkE8LVsMt9SEsB3DObcu6Sp0Ku9WJ6e6tQij//cTYCf\nwOj9EGVI19+roO8DEQc/szuHEdfTEjvcnmRe0Mz3R3qllftGxEJtuW1P5LTq\n5rP5PQ29ecBt3CTEPMhbrF+gS+zZv+c0MhPzvPTGR++2FCh7MondJhJqQi58\nqrBjfSx+paS0XGTS7Yc6+GjcYcjkhmj3ASvAvOMvYckyJf1ssMO/IrJkIpAJ\nKHB2\r\n=6+UR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC79PcLtdCBlbm1fh0LPCVVX0jwuOp60XcoodrOiEeXvwIgZiRTcl5OJ7U/L3H/ahLsaecPeFhJlaHjpHv6R1JLtL4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.4612705d.0_1626797103589_0.2041706852183931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.b36502a2.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.6b0442278.0","@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-button":"0.23.0-canary.b36502a2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.6b0442278.0","@material/feature-targeting":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aUvUDlAlmUTRuFfCtOOVjzAcNrCKqwsE6I3LqNKvVE1rTxPwG1dyBP82WxgqwA4Ksa9E6ZtcAP7eiWEYaeXx1w==","shasum":"859c697304989ead7c32e186b1d861e9a9014230","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.b36502a2.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEWCRA9TVsSAnZWagAAoWUP/2faF8IDncVB8qaTzgJz\nDQfJ3JhbKtYdaAO+Dyxh5Tqc9nE3brLKEW2IR/cXIUcyJMUu+/3ECLamgYpF\nxH6QW3KR+IKGzL2aDyZ+OSN5ZIkmszhhu+Zj4UmpvTPe05h7YDjs1N6aN9HI\nt71BmM3LRk+TJZpaGVEoZPuv54U0PNOeizhYLn7QXVzNJiZkCmPU6mu1yuJn\nE8CUdWA8RQpe+XVMk7V6hklOcGTdcbZ0eLc4Mjq2lcYNcVh5GtIdAJQcfu5u\n3kolM6kBy6IJ/oYkGFncmYLR1hx0HCl5Q5GB+sictwAApxxguSdKZtR2NYtN\n8r9hvDW2uTPYCH9Uko9LgYdP1Rwc+KDfiSkhYawN17Qrq/YPPrQPoKRGsvil\n41KAlmhP1lcTMwbL012HlSUA61hWC6JCPUMWy6N7hq6sVagp4rVEpFWBI9KG\nOZlZx8KtLL1QifnnOO6NQ+vjkKZDWkFbep/n6owXtMXMwACHzTEMc0baj5yB\n2gtatYTfEuGMf1RXLvx9d5YVUw7flDDY+rSzMk0IZa1yU9dWCr3iwTtpqiUy\n8TMeVP4PspI4KAXJKkHFOCqlTekEiZPp0driLJPaSndQAKMnpFfg4yz9n4RD\n7eeFyeBR44cth9vgJ2kc7fywLz3QPURwXhCJuea5++os2K90Sav3fXwFhRdc\ndRSh\r\n=P0SH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDapOM2noyniIlDLRi6sXOAJk9ZI5ArqPSl1aUh6BOeZgIhANBTJxk58Hdg1CSTGzUusF4JTh8UYy2r2sJqCTg0zRtC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.b36502a2.0_1626906902332_0.536196291316339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.2c392ab3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.6b0442278.0","@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-button":"0.23.0-canary.2c392ab3.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.6b0442278.0","@material/feature-targeting":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VGKWYDFTQmGnxmpmT00EG47KitecF1kRH9X4JP/9J6WQJvndVTaO91AbGFVYYZQLW4hsmHEZanvJHvzeiAZk6g==","shasum":"f1dd120f17e1233a81b5b845fa4fe30ca3556873","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.2c392ab3.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZiCRA9TVsSAnZWagAAVpMP/0DUn5u23g421fQZuHGe\nzEeifsza8SleQ3Sy2FhNVOXNaby24MXlnZQBvKdFALwL/MgrBCkI7QH9tq2d\n8Zt3YZiGOqcutkiZ0dX/vqkbpC6Cx0d4CDlCR1lAkgzAU9Y7vH65uYI0XU1Z\nC6Hun8XuzHXn7bwmcYrSNR2Mbr7cWWg6cxB6hb3WY3AnLvuAj0VZaylrirKS\nrQOyvP6ANm7SHmZ1AzNW7rOjhT9+7C66hm5GktFOCqP8wDXTlCrbu55XuXlR\n80kExdQAm3kpf3E7kZ43tke2ukgGh2FTRVGLZBZWLfayicF5Suys4fa0GutM\nj5Z9MGANqjPab1m9nfLpXk/JWBnSWoFM11VZoPaZoms9YJy6zYcK6PJsi7iM\nroE7Fqm3EsAs/SHG9LEWMb7KJIjVVAYJvdb530itPy/PHMrWWS9zF9IFe1tv\npaYo5dCxryYp5vN0xNigwAwEQU/ce2veKTCI5rT0clWDJf4vyC759+zQLk6M\nir9KcMuAF72HdFMR2jwIipAvU6959wC9VfVeUQM1gAlLHBScyvirsFFyAVPl\n8N2aMnID/JF2VKIUDuWBSuSKNyxlJ2x925/FB/ah3sqzUNwnn23exFOlsVMz\nEi68tjOTYeGs5ABhiWLG+eEar1tw46kxom5J+IKG4K9VOvNBorMMJEsi0sFv\nIe5k\r\n=PAcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyF6IpG15Q2ZbCq4HlZzpPmQEtPbx5g2BJpim1IR+yXQIhAKeic3KKyPEYg+JMwqTMSPi7/RIUs+Suue5hlMQNuKZV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.2c392ab3.0_1626965601743_0.18556049286215326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.e8bac95a.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.5f00e454a.0","@material/dom":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-button":"0.23.0-canary.e8bac95a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.5f00e454a.0","@material/feature-targeting":"=12.0.0-canary.5f00e454a.0","@material/rtl":"=12.0.0-canary.5f00e454a.0","@material/shape":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DcpOng0YPywI6ElVf+0NBbIZUULgAqQgKA/ucDYWlPWrLhQNPOXjiqVVZjRRI0Yqgj0kD5it+mTlpKaGRbESwQ==","shasum":"6c8dbeb5f9ccff6b34a8f8727522372ac592e118","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.e8bac95a.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6dCRA9TVsSAnZWagAApZ4P/iVGCED1CJU0wVdemtQn\n9hDpUd51zJKtPuByxRXvKPpvDmAaQH+PJQrSs12BdppyVysDVIwNeyHrnqAW\nyoRoq1XFL54KSlzqHKwiY0BDOZQrzi2PbHYz2/Fpl7lx4vk+dHjO7pSNUBQ+\nbUWe/vA6jQnGmRP7DopQCZH6/IuMfBTDJ441q0L8hNHliBBoufAPb9LdmHhz\ne709f3EuPUeP6djJP95bKUgezcaBnxhU8yLKIvDnQDvmINudoaaVGxl2Mgvq\nx7TUY3L4lX2y0d/0J8OUZ/bh6S5s1O9YOUdTcW7mNtKmnasKokbE82Eg6Pu9\n8Frsbd+X0mx1jWmZrhXtywo879VA40cCwr5z+eqWCO1XR09kejB1N28CtvIP\nbuTfoTOHREEbckyBhRCN4yn9FtbChBqSxmp7IYSLCpBLW/Ced1NRXzysqwEx\nXSJy8tN21S3X74F1g3p/Nsogj19ahvQiABK5W+RWh4qoOexHOzJKkM/kjk3B\nRLOwSqiBfcC93olY12m6lGgLoQr5WOjzzWEuR0AL3VKZu7X5gjD2GdjpjOvT\nflWebRIX/qNCEHXeVt1W9TeRX4a08PkKDGHv7fEgnU8iCvXqL2E+vcSYYjRv\nvzbi5JYXmgGB9ZXmnU740vlQJXG+kgPp+RJlSY3oKe0GVb9AjfGDUOsarB7w\nN/Ry\r\n=MzcR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClXJSoUYSGGoC7xi3lFUrk8Mc5e6htrhbuw3FJu9doFAIhAOBH/Vz0HKYxPNhBhSujmccbakAXBsBexIHpsIEmtZSf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.e8bac95a.0_1626979996964_0.999100150198114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.38f29f8f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.90e08fc6b.0","@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-button":"0.23.0-canary.38f29f8f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-53noAGqiTLg+ce5eVUcx2P3N2CVDT378CfJaw0gEQNthUJ17VKzZ49jlUKRi943O1SGOgvU0koZztocunU+fVw==","shasum":"e4ca7c1c3c1955d5f0889239e7fbb7e743bb4b76","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.38f29f8f.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wd9CRA9TVsSAnZWagAAFHUQAKIHVitnfYDn/jr1MaS1\nYWoVvITFym6mImhfN4WYgqlw6V4DBmmZDIrvuzn+uR7Y9QPrr/adjUcKYLhl\n60tRpV4/x3Fag99ajCg/IIaECEBbn2x6seeoJbd9IfvB/9IqVJUrHYIqpsMa\n4whf4B/6Y8hM1w0X+8hQAcLI87Xjht/MVLLZ4QTQGqdFdMD2FFn9GTISaVmf\nGkxf2FzhxVOcGmBXCf4Lss2x6LyJy79ny3S/lbdvvm0TeZRIbD9MLmw3hOEo\n/jpSIZiNJFNrh0QT62JPBDP6Kbq8HvZKf3joRxE23FZmdhIPcm6w2GGfwF7y\nSUWCJo6TVE7/CXFtq+ceIon9laEeJn5DhVfFt6D9vgeIoZ+2jIXmF9w04+xo\nYQ5e2tpW2JCeQKhugZp1OFQqLWR7jfF/df7WgWyIoJXrYqVjNCSiLJ1BRPqD\n44UQBmml5C5e2rUd9A41+XRWTFs9wgFs5Wq2pTpBx7Cysq50oKT0vEaCaULz\ncAmYQA65PAHH9WqfOzkEavXU1wJv7oZ+WQ17crbSmjZj6iHGxMpEgCfmuRJj\nJOHxL0mwn5NFSdwioIiW9N8x4Rljiu+RNQaw81BxDFHx3AICWTVCAR54RoYY\nglfS3wG2A/lMl4m4UOgzS+Czd3Ah0xa8rojzrWiG4JO9xvcnyOVP6mDFBM//\nWtq+\r\n=dY8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5WHX3yJuLSefyu/SrL5wW0KdAaW/9lHMlXJCGwQ1oRAiEAnkbjWO+UuU+Apw+heYsBQfvFRbxL6XHw/JHKQLRSgl4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.38f29f8f.0_1627064189239_0.10154492120110303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.e0693475.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.90e08fc6b.0","@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-button":"0.23.0-canary.e0693475.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vXGPI9Ox6J10TiZxL4aUEDQEtYj1up4TKKGbI3xNVR5akRfNVczkNYT95UgB85Pxuj7NkobTRCzqSgficHPhpA==","shasum":"36587b3eeea215fd56197477cc59ee148ec3dc9c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.e0693475.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDmCRA9TVsSAnZWagAA0SAQAJM3jyC7Sx6P3t2IE9wh\n4AlF878fAvpcs9C7XBdNunPV3JIJFshRdIO3QwHVAEotVIIJQ0kuAqQxvstU\nzHMcTjh4vFh+vjT/AqnKYnhkl/gECmYM2HoYm+AGwdsAdw+wQC2BUNTvq/Nr\nj30AAG6X6+shtrESBA5iguZfCVb82h7sTQcu5U2iPwa3zG4e9MFY6O67LlZh\nolcwsNj6iGZ8jjTwjeqa1D+mSE028RXMT1AcZ49GC5Mpf6CydzMowtxapqN9\nDoNZZm6BcEStKiXgGypm/lP5wBGVItWxuh+svzDasn+OZF9fDvlNt+xzk+lx\ncipqnUmRHd75E0GjuzUWaMiOCfMdx/Qv9EeU2Hz3rTPwSa+9GGwB+B48Zj34\n2OdDKTzuiur21wSKB+RrBjG7iRozSXOcf5PHo+7pL3O+5aW3IdJGM4/fKCjQ\n7UbqIBDORdibWd47X7vyciDactx1BxUqwP+Oo0fImKWoF1yQoYm0kpTXp0Ey\nIwASF7yppdvdSrq6Wgf3Q3883WpVWyyH3N57INh3+InIJT6gvlzNLTHIBu1B\nKvOm1ZqyvcD2grSDs1R3IQOf2AE0Q3dA/FQFRysgkwvq6Ym1RVG+T7NLHKhX\nEH7tn5d1rWSTeAqmykwt9s/ic5TTZVd6msGC07akDhAqlMGonI9nLrHAxplS\nu6F4\r\n=w12u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8RjtJkWUEewLJdutFNyI2veB1O3fzaaz6E0LE8j29yAIhAK7kNlXSYqJJIi3vc02ClXI9WFZfvC6N6s8Bf37KbWx3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.e0693475.0_1627066598529_0.8341266537063339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.d595e030.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.90e08fc6b.0","@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-button":"0.23.0-canary.d595e030.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qh4yaHEqN6+p3nosvMIxQHRAyHhBGudjOl354aAMKaaiT0dICVwvxshN2vkGBMBqfrEKTiAiGGx7B3rH32VyZQ==","shasum":"f5acf4d6f837dbc9967b29629ce727956c71a99a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.d595e030.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxSCRA9TVsSAnZWagAAXW0P/22qBYqJx9my9NYQ+FK+\n+4oO0h93dE1CSaoA2ReKUNoOS43hmE6THmy1AOwqj5R8N4IRurcGRdJwaNH4\nc74uWWsfbj1zOuBSruyw+qjJCx8gkXajuJE08YtS6kEHhxNk0sanjZ+Q7Wlq\nT7wr8v5eYbPAepRr7n4/eqMU8M2QozFX2qIs938ngj9Yb9ZPG5Rpl2MwRxay\neE8WHpv01p8S9mPRqEnCpe3ofyNe/6QJmOUJx4nYDuDs+cxcHt6vBzrTLEB1\nQ7/SBmLX9XZYvwq4Ld02xxQEhipRC1hhuTcgj3BOlBay04SibVdzZVyNVwLF\nw5nlz5wKi/NH7S/MGbs+xWL2iZZypZB25vzJIXLBF1MMSnFrelI5nQzZB0kM\nHRNOarFK2yp5VsxqmIQHcG5VfapepJIaXnA62/h0xYL8Vl5X9Miz+SLp3BVY\nxYWr0YMxDdGGkq7U+Cks950FkQet3PvaJSUk3C6HGVScEDVHJqmKK7pd794N\n6WdgPglnDJ8RAJYI7AoLiHm7+hGOVeW1d8MkeSTQXMBgbKHOQnL8+dBCHqGJ\nqzdv2cV0fdndBVc4tp36PDqZmCOw16cT0uA8k1sv92lAsvJ1ukCvWV0htGv8\nn6cODO1S5cNxcGdYX8cWeL2jFuvzQ5PZ5xHxyx9e8+UjHITU2uEHa034Z0sk\nJgrl\r\n=BSm2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMnc0O43Eggw0zYmxwd3h2tEiLrENXOMcKrFHhCtsfjgIgZQ0JOVdPM3S9mFBT0l/MLEtagDwWL4cyTnllMd7QBDU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.d595e030.0_1627073618624_0.9491170924833301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.fe7cca31.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f36ac75c.0","@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-button":"0.23.0-canary.fe7cca31.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y8wNdTre0BwBP72Q84SUQgdnzugGcDXXY3kHqa83l7okxFjaIzYJX9OjDc1UpwhCY/eLJ6oEqUFCPcLl5vH2kQ==","shasum":"f07983f02c6eab4c798a322f4bf7e39f80119474","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.fe7cca31.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zs4CRA9TVsSAnZWagAABSwP/0ZqP6uwnwK8ICTqp5Xg\n1CX1afFZoM+Yj0ebQoJ3Fdu1BgLx5wftML19rBM8qbO1npwoQUZ/oK9/hfKB\n2oWvPxtAksj0Zdz1mgJ9ZWG+jM+8vwf37vO3xIBhlwwFJZV8nw46w1ufOqTr\ntCdCaBK+7is8GHQe5GzhP+n1nZM3XiFNNxCNZ5iQfbaRk3xKG1wQk228P41C\nqqpWmhOdIK5AqnWCPyUzZlAm/0rs8yalLSkTgJd7QUbXSHn6Y0Oci23WRqKm\nqNfiQWUeGyQCtEOKeQMb0k0WV7NgXiK5mxSKGh+ZqBzDOvcP4KjEuidGOKce\nl1UUN8Sc1XyrJpK+5cHUodRcJdBXMlz8oEWGeeplSGS0tpBXwFiujGo2BWV/\nlH3eE9TW4KaFuZHZBWfJ6d9bwlpBVc7eXu3+WU+zEfrzIyWmUKA3+Hpm8vfN\nmow0ewAAa3LPVA1baMcLXCUaqPa9C8AfbfGzbv4/Eljz/CzwppC9H+HCtNWa\nbIk90cIsY7odMMkkINBVr6hJEf71lGd+6MATL/ReRzVmP/kNzC22k9BiYyaa\nsEbXhOJeSE9w3BSGflPidRK7dLYl27ZU/SXR8sZX0joBDRyJGTTUb7eIWgTG\nQaGGwC5md4YUEDXPPWhJt+rTuG3nf+ZbRwYMFmdXX1Z1MGXS012rVdGYVixn\nqGo0\r\n=AxSw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq1AMKPlgmLbY6XDEzIqD1Rt1ywNfKxOVqKGI58jZN6wIgaMsNiZkAbTG3YBOYexpNrElQ4y97y1mEJcxReIrrehQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.fe7cca31.0_1627077432348_0.6827968564426916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.fd9da483.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f36ac75c.0","@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-button":"0.23.0-canary.fd9da483.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jlm6WmsZaGiR8OHgNJTI/dvj9G+Ttiuv6WLMjd/9h1J8Av/kjkJ+a3/4GEGZKQoyf9vsXWYfinHq7DxsaeScAg==","shasum":"0ccf678b0885a1cc96c3a270e4223d9cde2ba5ea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.fd9da483.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yhACRA9TVsSAnZWagAAEcoP/2cLLxPaDP3SkYAsaMww\n5lF5FLl7InRQ8y/7crF/mSlc367pcPfTYA5RIlpuAR/yYI9PC4cfT8tju2Ns\nGrSq2koQ67b8L0YZWlgug2gGZjeNqoqWN7zOs664aLPP1t0wNZtOdUswrudx\nVq1YnJazEJ/gxjPe/eNIuPFYbwe3NUby5YMgBGQmaQBfYy4a+4qZnSq1T8Ll\nuZLMA3pmm/u90PEdOp+7KSSulExEZ2TJXdDvjacY1c8pofB0PSma6M1WaSCQ\nVv/8Enp0xOpfv8GeZCFUVHCLgeLvg/S5Sz6P0XG9+wWB8wt8Db7j7l28U+gV\nImhXwVRB3Z7wsVWyzf/Fa6ucH89xIDAAJmOslhFUqT2aAZWtpNNefP5GTthB\n2oU5ZJRc5XAJnH0iTq2If1tp7RA9iSXw5YEgYJezDssEn1ysWPSEI170wZk0\n76ho7vAWQQhmfRCLD4XDNXl7sP3yrAHTSxnmMDFPgw3f3Ocj2VTd3kQ+AU9E\nSIF54J6MnWNONKgawoIcpefnSkA7uhRBl81jQo7ltdbrM4fvTRbNprwTYr6H\n4+DiC5SvdEKuuHxkZZ7kNZM0nPi0xUWFcJ0mtjDYl5FwSMQ7IiD8W5cmFs9c\nVdVut006Q7b0J0AmwGJdFRWpZbvP9Wqz4bft8pESumLJs1cocW9vQhN5kNFU\nl8sx\r\n=o8xK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWuWKRMiAaW0vjKJX9mT/ive72cMauXC3ZKoXi6/yupQIgXsLwdopZhoNWmAcVc0ZfUlWKe3e7ouQxd39H/BqA1GE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.fd9da483.0_1627334720148_0.11681782979535216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f36ac75c.0","@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-button":"0.23.0-canary.8a4c7e06.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-udGGGiDlLYVJdE51tL63x01yJIuxkfQxdjtzsQnwTBIV5P1idP0Hl1zm5MBAjCjMlFfHZWSV8XW/lb3B/Jmdng==","shasum":"7118f869e01c5fbab2cc3c9b89b2c4ed5058de06","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.8a4c7e06.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrMCRA9TVsSAnZWagAAqyoQAJyZccXsKGtMKBRHH4NT\nUXQntz7Niw+NIYTy/FVIICoglNxG5eDIJvRHB84aKCiOf1E8CsBzMNRp63/Q\nLpovB13qVcewIqFckZilaS5Cyt3nWFlY2MQs9VP5pcqZCjtoobLwEdjvw3b6\nxtj4DIagZuzSQTetHEDW50MYf5exwUOnqR0NAcupqfUgbOZdNybI7DbkmxWQ\nbfBdACQ8EbSY4QB53MwG312GrgN+3DzwxdhWcXH0IIQIJk5yh/uRW1u6MouF\nF87ApeOMLr9DRO1Dqa6A8qsbDpD2wFp87Lq4fnFjcqZfqnxua3ovi6ThttoP\nWj1fTPDniO5VEO/WWtjFS+Kb27gc3gMfcCaBUOGJg+xGFlf4ukSKSOVJhAxr\niF0A24EEqk5hDUZThhIMpXqWUv/ebUaJismmTf/jqrZxiR1TKgygM4AW7+2M\n0qEktsFmqk+O0NR4+uQY6Xfcqza6pw5ZCOqR38gSNRrJIQsFZfouC5Kmb7GX\nhAMdK520q3iBJW07Haob2rT9Loodqq9X0HDvHn9NOg7082cx1of8zJPWMH2Y\nFP6aMOLgT1yB1xlCqBFV5XEAc6Qs+kvSlOulNw9fgJHZS1q2KODv0vgW3L5m\nPZRBWVr6cq0QtQS2bo9ivckgxDoAt0gCRpJJF7189ROrMmNF+eB7y3BoS2TX\ndVPJ\r\n=udYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfiEuWPeCfWk9cFFRuS1pH25T0rmhTSWmqUptVQjGUIAiBJUL93Xz9n7HLF+gD/fND1x8l+PMuCc6cQLRr3K22aUQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.8a4c7e06.0_1627339468526_0.46109760788396015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.5b395fd1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f36ac75c.0","@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-button":"0.23.0-canary.5b395fd1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GHWv/03u4YRFlRtnjj9EBBc90qGGXan4KPSm1hGnIAHwNRUepgHbcz+SJOkXbJTCSBFM+/g+z7lBxaYG9Rtvig==","shasum":"6b979f112ef2b20a3d2d86f0e7a8bde409474c00","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.5b395fd1.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5rCRA9TVsSAnZWagAA+AcP/1Tf/Z53u6LJM93OUMQq\nmgQP/Mvy3pT/2EcCVUw0jsxg2HoZGGDugGR+8C+9MhDlTf6W2mAdWjjaclDA\nPLN99O8ErC42xbOyDsuYVbhu7Au0CMPtinu5T9SgLvjQeyzvK+GzaQmZB6+d\n2otAhqmRsOUosEOYLnUxxS7wrmXc6dzI5ok+Jfz3vxPDMhPa8rjKBo0iC84S\nBgoQ0lm6RlOwoDm+ai+LRhm3pnPeEqxvE93v8ZP2IInNs4iSF6ClzWbbqFPt\ng1SwTsIyz+IhVH9VN+1V+Ofi9fgQ2GsaF/Gbhtni0inXns65Oh/HWbo69YOD\nxD0b5rwzGjsHo7SeNygpenq/fNv6q20FyFgRnv1eboDtmAsEAyHz09C7XGiR\nVicSxT5n+hbuRKG8a/NS7u3Xh9eG45m7x34itnNePx7W5CA0gtv182clo8bq\nBYMYLBIYVCCZySB6dYn9UdnSaDJ1oanQ2XdR9xqqy0S0/0ww+LtEqCiE4fgY\nwj1m+JDM6siUbDyHGzs3wmqClOU+AFi7VyTV4m+MOvfS4wUmCEvITjuWTfVj\nMN/5o6KlFKakvo949r9W8a19YGhnuI0Ad3K/EqDXKXJOnYt/PMJwoOo68YBY\n4/LBF9hzjWHNaJ5WuJX1wNgkdMbulvKlTAh+AwtFZfbrybYmRGTmPLrOl0kL\nVVJQ\r\n=KksR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSY4FiVOL5f7XFB3ftpMPU3sifmvpYQHejDxY6BSlnpAiEA0AmtStow7i+waSbZYM5MSnV98gWsd+lhXiPpoFGcdLo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.5b395fd1.0_1627426411651_0.011339441081924306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=12.0.0-canary.3f36ac75c.0","@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-button":"0.23.0-canary.e5efdcc0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-suv9g7k4h/VwCiOpHTwG1Gmby7xCwNHaJ9fim/ojE1JgOrf5MzvAZxfhhWfZHt6oQsjJLQmR3qL+ahpUD3zl7Q==","shasum":"531592fa5d63fa01c85130730a2388ba9168b471","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.e5efdcc0.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJzCRA9TVsSAnZWagAAhkMP/0B+rv6MOc2NZRJcxuT3\n6Qj+Ax0uJnDjdCmdDEQlovd72+QvBZEziMk+MZRyrmZ13H7F69V1e7bk0FDu\ne7efBb0dWK9rNwmhtSGwFVDrZNxTeRsIsOjWFUoN694+brSJKWKHigFkhPhM\nEHKab4G4n8JyL3tpd3eYyYRrNuV8aH7rsqRGOSdlv19xoi8rfb7DxZkBMGRK\nJPZkIIw4Pp5cLsueVKGrASvnVnMLoKH3WmlDf5sShyobsIY4Myf4RZehHiAn\nuOXl4TSLezl24eiNArFltB39M3FPs2Gm+cmWyAA09UfJ9tqPryQPAbThCTBG\nW9VHb0SiAxIcrb0US5blOrZD4BJ48ej8CEqVdA9au3zjERlCx5zM6wE3qT5d\nXYtM7TBxwgdh1DONhERqoaO83tAkQ2IVVlYAvJLFulwhH6jnI4X5HtUg09/9\nbX0KUThJEHCuxism1Gpe+8odQpZ3V82g69pj75a7dKBAyyUnNe/icC8FCCAN\nY5vkvpHDkMXemJMUbjFEDS8+p6VuKODzBc5fmTaiHQojG/rPL4o3SjU26f2A\nkWEfmnieMTc585VbhbP51herAfWRGvP89WN2ISrVN+EscQr7h9TOoQlkmrzR\n3NxaglNxZEBqQo5NV2yy+1yHk3m5w8YT35OkoiUU3/o5wkSZnfaf2WSqDeXq\nYhPx\r\n=rD1X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCqBfaWqymzJOF7+uofiHCgFi5qy1JH7PpNEL/CoDIrAiA34pEfUyYMcLNVd0eUHmZlN20tEGKZ2+0eY+9qsloLFA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.e5efdcc0.0_1627492979638_0.6953563347827398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.ab310900.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.ae85f7eba.0","@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-button":"0.23.0-canary.ab310900.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uBbWHamBYL5x1R+sPrqf+7EADY521r40ZBd7lE6a7viKzk5M68h7/OO7KxvQfOX8CQoJMQxqkknGuQIlOZA8ZQ==","shasum":"a22565a49b70383d181848af900a348431665b99","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.ab310900.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxdCRA9TVsSAnZWagAABoMP/RfvA9dBUNbxZ5qCcKwk\nyY9eMUem8jM+kd0FUNGiEfwYxK8LGKl6JqMkjk1itu47+2QBYpa9cu296pLC\nNGuOgSyMqAKTC264YeuWaK2TPrG8gLaP2wmKHPhktZQMF4cfe8HcTmxWyPE6\nRJQwM8GSUXFTMTVZC8RfJypgPtv3J/X6R7oEofYtmk0AwdDPl/qcbvxVauqK\n9EApgGWpAKf2hdlSVvUrS7gpq56WJzKSchJZ9cbV54fZD+BBKl1UZPP4D8S4\n36rzuX3Q3ACgvTXKbPGVZnfhEAHeiOL0plCWpC2t2gXThm/TdTnwSd8yu5KS\nLObRutkPgazSOGQdg1TGKBFSQUDOFy0XgmE1uskuQjt/S4KvlbfjJuel6Rvu\n73OzbqtJTxtXCRQi9Agf/eXJgswBVtiGzCr6IllACUdhRxker2YREwBeczKJ\nw7DCCYgr5qIFXwKMeOiAa+BX4G9dkVtc6vLtsSijBdqUvO/Sy/s5dPV5X5ou\nMVI1yk/aHRFly1q3pZVnMx7bpNhPL2l/x13mbIjpV4GreJGmL45rbY38EoRa\n9WKUmoO9J8BL63DlDX36LyaNPka3sHU6bZJ2VdjEinExjzdYn6ra3++tB1nO\n2w+yFYJfU5iNbJF96WSHgOUmYokacreN31kBB/pOKtje8BQ8aSk8stAIy9hk\nZZyj\r\n=NXZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq1sEBCu4mO2FVyA0DK0svKU+Idn3/3P/6dk/uukb6rAIhAItQjtYOqHVMTLxxjDeQ6BC/lX9Fh2t5nkrPR1GTw3BZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.ab310900.0_1627503709268_0.8510359822498621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.ae85f7eba.0","@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-button":"0.23.0-canary.21dc9bc5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GbkMhZvcSwOdlskkCEx7hZYsYV/o9FXckxbng6KhJgHSfngYaIRbgSvVVGNAzEUiGCzJNDTQ25hYxl7xFuVO5w==","shasum":"a5b269e6a9b827105cbb75fb68b31a304e572d03","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.21dc9bc5.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb19CRA9TVsSAnZWagAAWxQP/RglHusWn8NKnqX0DxKx\ncoJHfeJam30cNqPgZqlFuwrA3jK9RuvWazPPqgCvv7D2aLVsBrR7Yc3Juiyj\nXRFxqlHZWFg+OGvwC+ZddGPTQ0/cmQPn4KoubB9RvidMNEFGTDsI4W9Qrfp6\ntCymeggHFnLr4AyLtLTuNDUDbwx59POY8jPpw4sYsQ9mczw/UcaTAiyq0PKD\npX/xaHYgdhG7T54PNOd9zEj0yYT3uGGR/wft5JmqrRa4HBd9bbqPgUHR+wze\n0ulV89vg4BNP1g5Uuye0x2bYlsDSv1SuIKSF3kK5x9FHmEABIFkeT3sryU1N\nJT18FMRozOV3sbM/00LS2b9EW20MrvZC0j9qUoTMvyuDMo1rgu32IxcdZdfc\ndkpVXonQBfpc+KQWp1OZCwYnb02GDEzqiAdA20YIVUVcbOBxHdHNwp1uvsFL\nSEr/Xca6nRCF9kuAzmceScavIvfeb+pUh2e9xiar2uutu9GxqhnBVSaGHVPY\n0wbSZYOJaMVfMRsPZTfGFaBEtVkh87AksscbSLuuQudhyPiurYb94rnl3rjY\nUiTsUF/R044+evKl/O035tak6MTfGc3GpVEo3PhpW3UbwuYz2P1NTd/8R8Vy\nhE1cVq758aNCrmF1Auxb5ugQ7H2UIW1tk+LKFJ6uzx+ZrOJ7TRbrwUJf3nCn\nkDvZ\r\n=OLpE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8zvzRrONE1mTCt0R5/pJlp15VKbIm5U29wSJmL1KtvAiBwDyuxA/o7auMaU4/i9PDVYc++lY3NiqN0GERHQLD4zQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.21dc9bc5.0_1627503997162_0.20422457660447257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.ae85f7eba.0","@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-button":"0.23.0-canary.68c7fe5c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-M4DcrzVaqfAWF7yVOubMGI5VNRF+6+aHkXhSKQ2scWER9dnkYB/vxRP3d5qOhabtBG0Ln6zj9K1wIlSG61GTsQ==","shasum":"64e2bc27bfd64c5212dfb065821481b9a9b5b7cc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.68c7fe5c.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQ1CRA9TVsSAnZWagAAYCsP/164It2TZVrSiAoZyV1A\nTs/HFSOExDctIZUVnRzBW4UnKRjsPax57wNxqbmiifCZ/s8l74WaQ8yplU7/\nZdCy9fYQfZl3aCMjk75roIqVEJROQjGWYJXSwGw++MLufClg2FLxNtl0TNNz\n5aRGAOTenT/0Y2z9v12laf/cT5NX3gpMEcKe5Od7n22x+RUJlPBSJ3uFhA3z\niTCxIqqNm0FZq3WegphcaEVP2MEZ+gI1Re0shpxoJat9qrIXEY9s/rWrreAN\n9vSjTS5mzPr/PsmBXCsoDJGzi2EOjUFOIxLif7cEeL+oB7so3v0WMytXRvzh\n9vLWnjX3OEVGxfnUXmZrVfdgF/gjhEmZ9tNNNahW4QN1CQrPYRfe7VMlXaMV\ndwxdZtXl+7s+lLxu/UjWyH+1Kn3tAYydTF3ztSlkSkiIK7GyGE7hr6AUoK2S\n7ZO7PHusGsPc4J9ThMgg+tDVz9urQXTP2qWD7NxjCddVBemv2+n5R7eGIGoF\nwp0QcAaXze3LGBH7Ik9cLMHcJPL2nXSmV7DAq2xAQk8JpWithnLhC0Ky7+vm\nx1zTpxhCXT5C61jypt8Lbnq396w/vD0ZfwncDNqi0TVa+xfPWeq2Q9OMxNu5\nLYE9d4n+SWufSzkrv5f/4GEMYYlvm5e/4yXklsurLbcakO/A8qFgM14udMFm\n6XDk\r\n=F17U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFFnypEJj5Gewscj6479lrKsRNx/6iUlBOhc9yNBucOAiBtWGjgXHnksJ3cXkUYE4Y4qBO3VdB9+N3X1tnS9eFiWQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.68c7fe5c.0_1627583541253_0.48240116612115447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.aebe39e8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.ae85f7eba.0","@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-button":"0.23.0-canary.aebe39e8.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+a7ZLKA7TliHAF5waUGdrCeQsaeT1/4brPAt0sw9x/+sOs5u5vWuMMOz93yOyfxUYbh5vZZCupu+lb7E3BSvqw==","shasum":"8aa11453ef3a7f5ba1378246eb44241b0c8ea42b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.aebe39e8.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+GCRA9TVsSAnZWagAAN2UP/Aq72gdbrzgRP6yxsKKG\nsEQF8lXsFbRRx5mi1XHz/0b+93uNxZYin72JrFJfkyiVwjrmkMO1LRnkwNLW\n1CHeDfqEm9bC/CqgXLPsWjGstpKJfkpwCrqPhXGdIr7JVKjoc10eqFDmrPZG\ngO28y7Vm8WxIypMewjEYxQ/VbGrwy5GXWt3S/U4XBXfUL0QgYOQ/N0nTt2Tg\nSGZinjDk3JP1F/kVFpLwBVv61CIXQk/BM6dpSH6lqkyeX2dBiBsdNs6yhSs0\n96Mj/LC21iiriVsK3DYs7VxfNKVK98BYLoHz47Ll0UGES+bijY3+5iDEF0r9\nFbloIIckA+CLQvEfcb1K9pSCcnx3CQ5Emz0K9JPpWYz8B8bJEDB6mavyAULL\nWpMeur9JXSIAI52Uhdch6lTnVk3qYw9RHV+Yu03VsemXM3ryfqcdXEsdYxAk\n3aSKsnlyTr/LhbmVr3gBQIJcObC6+O/cJbLEGCTbUXwB0YU3O39WuBWBhQOw\ntGCQqHTmz9Li8suDaPp0PM/rEifeCOA+onoCS127Q619OfY2zKZwTVEiVsh0\nPziPm0R1dq9KPmFmeL4lcpAHyH65MEKyQPH9BRVsrv5nXmJS4eWjeev2GncX\nsLOyiFaqX2tn1E/yUqiVOuyKMB7fbn7dtN0xC5DrBm7Lns58oMmfjCqfCihk\nZySc\r\n=eOgw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJ+0hL7hncrYxDG67ZKV5o/P3Vk4VslGQfzqgr5bNDXAiBL1lOu+8AA8ONqz9AMyLC/iFfTES45oB8gAwLNJ08Lmw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.aebe39e8.0_1627672453891_0.77756857613184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.ea889c69.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.cc5377458.0","@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-button":"0.23.0-canary.ea889c69.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.cc5377458.0","@material/feature-targeting":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U/JkRaoJJevMYj/Qhho62zecKxMwW7GHLCz30R6HdnNlsy5W8n3VDD78d4llwobPctRI8HBk0pnnF3HTcK4ghg==","shasum":"80f49964a0ed55e911eff2b31772dd567ea89866","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.ea889c69.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9qCRA9TVsSAnZWagAAuwkP/iSFnI7heWAhify9Hr7C\nsHT2TwAZCREob1INsvib+ZFgSHiYZCo9BwSBsWfzqiBlckrfORzn7MJ7XUbL\n7XpO3Go+iZKVQGN1c3yoRdZrmu6NBXGEZUJ4plVc2ZmLXtpArB8CTu7Us5b5\nGbaycoyWyMb2ET0PfMRyM8WCjADCFgZ7v+k7hihWqghtI1hTnPHiqGWjcX2E\nzlntEjpTM91gqrqD/aF7NmuDiBU3nCu1+h8CJwDMeljK2WWlFHdHP/2u7kTa\nto3uImJrhAmvue/7YV+GUhu2OG/Km7znnczlPNw3ig2H5L+axCc8C0uaC9fI\nVcCCQrb4Y/vlGdv45wcEnMNCt+oK3VqbAJEhLnSw9Z37tqt2CDpTuG0U3c9X\nbI1X4i7amHoRowG3ErYy2806iy+FhA+bVv32P2WOr2cvwip7bJQ+560wYex7\n1BNTyVFDLh/ix3JcSRqvWCWeUAb9IWpf1nS/fAsWJoDwyKFcohVQr4Qu9tYq\nKZdOe3UVUi1dHA8Va8jF7vckxcpxh7G4/NyQo+OtgXl29aweTymm/Qe8PNkR\nZYlmEjivp6AT71ATOhLlkqedIH1K8yfHZ9FKVAVmb7dTnXmaBKb8Te20JbP1\nhzB1EDpoVVMzKb8oTeYloVmRWoMfBk8cQHtxGhlzTXnTi6tJWVQ4XU/UHqel\nZRad\r\n=ObYl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlNsGszWFjd0BVdhiIvIpxfNO3tDB0nQ7IDVOeWzUoDAiEAwk2ZyKKFAhcW2alcW+FBLuCD10Avs5/fUb3xHoFbIkk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.ea889c69.0_1628016490683_0.11245731711238083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.21918905.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.cc5377458.0","@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-button":"0.23.0-canary.21918905.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.cc5377458.0","@material/feature-targeting":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uNDtRYjeex4veWTb3oaZnSWLLc9lY2CGhCVbp5IPds3u5MPz/Lho1MKNZqnqFzw+CTW6950+O2p4hN2aVh1PpA==","shasum":"2fd54890231020caed7afc86a6f874dae6ebe992","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.21918905.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHPCRA9TVsSAnZWagAAhlsP/00iupKoPj8svT5tTNhy\nRWHvX0VpMR3cCeWCldk8ZJXECOaQMmtqIpehxSEAZjzWEIK3TFCEO/QO4eaO\nNBFljtD6sWKuKG/xzcvJrsBuTFkrYnT95urVYWYlUXIhxaGUV86HKotRdkOp\nUwFfZLfJg+Z5RQjeNx4Gb00F4WYybDYyTb3OhNi7Qxd2EcKvXHbYf0IZNrrT\ngZ5Q3CI0v0W0qzEFLgDeoF6Fn8XJH8gfD4jA2//Z7VZftXSzj6XtrvmxY9AJ\n5N84pN7NdoN2U7WACRcsYUMbXz0O1QbTtMuGO5l3eLBQFHs3H8F6QpDkzZR9\n8mMIna3UNbS6j9BohE3Xw7sMcX+K5XJ0WP2Elhk2H51/8qW4rk7joFJRNHDs\nGOo/ihIHhTXZC3rrizwJBgoRDvQ9JbJ8e08I0a5hkK9lW4+HW9tgdgUL+6YZ\nsxfqPSm7X97QX8W5XnmIFzOTXVYZtt6mRkolHIPhbdf6bSzvJ7fBdwZEActK\nlncpo/8iLSDsMqi5f9Zuy2LDCeKSCXehRYDxxYm0qTMycGAkBYnpeCJuMV70\nuN1Nkg2jU5aO1CBMT9Yb1P85IIJbtySd7iKt05iOikTWnAfypiD0yjegDA4r\npSHD5RugFJ862oQWNUirkx4RADP9ypJ6SZHx8z1K6khDLjzphR6K/CbELSHn\nJmhU\r\n=7n+B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWxIH1CazFk37hvAoW0ylWxySuFR+x29SbM26ijVUQXwIgYrG1sFJdg9iF4YmJDf21NXnv30gZtwMVb9J5S9+maPg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.21918905.0_1628025295364_0.9630951473966718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.193c87be.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.7c96e6b98.0","@material/dom":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-button":"0.23.0-canary.193c87be.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"=13.0.0-canary.7c96e6b98.0","@material/rtl":"=13.0.0-canary.7c96e6b98.0","@material/shape":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RLAF7uCMIcMLqY2sipaXG2y/FGhGwdY4PzPWKg8EOWWxBsdSTH9rwsrPoavdZcHNOnfrCqpcvCoHcvKghIeBLQ==","shasum":"b621c77ae856b0522fb3ba3cc4c334a424b36532","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.193c87be.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteHCRA9TVsSAnZWagAAe4IP/28GQ32jmN+VrJeUsaun\nQiPzJy9t4FC6bABjETHHUFYfKAcCHC5vKtgFyzfC+yUO08W3Y7HevonZZFIx\nEvXLo5RcoHdbvv4Z8xDcAxYSZ4EWvnKGRh9gdx58jSRwtWP4swV3RpIvxBzh\nm3yc7NSc0Sj08+QK9Fv5v6TXuSsV00JpZjPCDEPb43xvv+XxHwcJvA9XGuPL\nc/0gCG4g1GBj2g9GCuhYpW2PT/ljo8A+fhMq9HgCZExvYcH6TdDPkxOyoCSB\nSqQGWabXgeaa1Ya+807ABufM080SAC6LdChsNq+QINuJH9k9sPbi6/g3rmnG\nMdAHwL2uuFffd6INGGme5zj8acT6qM4XXEkaL0njF2m/7Z67dbh0P81gul7k\n+Vo9vJtNaDy1QS5A5u7Fuu5JlBxRnA7yCBcjsNNFy0kO6S9oD4GbAa0TlTwa\nAUSjwLxpFdwTiIKhvSPckXbkX9JMuaJBy7Hmk84T4eIofoUooXheAeamvbJJ\nFI4MUBHYuDDmeGfeWHw3iTmhBmQQNr/ksvivFnMPXgjlhXjrDZonYt+rsy6N\nBnFlBJpEgr1PX9O/mBQYHpejFb/J8BSkbD2cYWocc/O5YFuBw6vZiOERGN+r\nyx6ruMPEFUCpdtKcpjU6d5uaIMG1nRVJz5kqRbLxaJJMwjslUZ9xsQgO5NER\nxI6s\r\n=jHAz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5sjV7u8g4S8L+ngvIMEGc1ZYY6Wx7/LQJzRTD/D6LfAiADI/7rdQ/Spx4fwzhdR33BURU0SRYkWgB/G2i6tqAYIQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.193c87be.0_1628100487272_0.20161919060512146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.3dd611091.0","@material/dom":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-button":"0.23.0-canary.6fc52d8b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.3dd611091.0","@material/feature-targeting":"=13.0.0-canary.3dd611091.0","@material/rtl":"=13.0.0-canary.3dd611091.0","@material/shape":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nv26exZNMFjAe92wpqmRbKDgadS166smzDmVIckWx+0H9a0148uvLNBfeQIGgV2zel1pJ37JGvb0iUDSnivhHA==","shasum":"3b6e4ed6f212526a7a8a54c4351c7f363b1969fc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.6fc52d8b.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnICRA9TVsSAnZWagAARS4P/j88W4Yf0ceR9qh8X0yE\nonfe6Qq+c4VYb9y2GBpl7pDuuBxFj6CZp21um/c3J0HJ1M8EP0F0tPFkgllM\n/v7XC9eyOP6iPkNizTKAsKmRFyyWGr604ddwqfRE+h3u3rQoM7vt5eWqJYSY\nFzXm+I9auqhkHC0shjQFo+exJfVVEU11tsucxjQ5lZc/CQJ+y1YPi/JzMixi\nE4WzHIBj+PAmxBf409KDkwECxJe4CPBL4U3spAy6gl7AdJakMrwuERnkHZkU\n+jU8k0gu7m7RT5GK2r2tb2s4SLzBP6zMq8VwIbdzTIETR/eZvMm5owO2FLuX\niNWjKZx1pm5/zsmrzoYbW//Lco6mtm7ofQaY4HfAQ8jRO9q8wuI6gg2RADf4\nq8ZS1sNEQVoa9FT85GEpDH2aR4bDYPq8U5KLfQMN2X2YrI2pl8lv2XKiTLoV\nOw5T3f3hadUhmEzXYXRbU5aJKqe3S6L37aGpNMYq6itcxw4u7d/EUD+pvA6G\nCkLgxrHQ3BNnQG5Ptgm4Dh6iMaCr6l3EuXbY6k7bMRVRdudFotMDIH7hRkvc\nZXWi5kPlutKUsTNAkihHZwIe7U9Ei0CE+0qhWEqEf4dKUpm4928pyYkliEjg\n5dVP1JpADR9cJiFkq6VhgTZff7Eh59JzKjwVHGJFMxZxBLtTo5uzhntRMlvz\n6X30\r\n=Fsjx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqDOcHpMv67poyKsOTlyBpRH3ts+dU3uGOA++4OHXOxQIgcQRIstqph1HV48oqWqZnD3xH4FCVEM5xRBoqx/g5QFE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.6fc52d8b.0_1628187080210_0.05823260331251934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.e2e9777d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.b47dd37a6.0","@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-button":"0.23.0-canary.e2e9777d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kiwSJOs03ZoVSXtHVNo8UneCMLwYJp6wYDhEfbNM1gSq0t8LBnh/dxGc0uTz3jH3jenwlk3e54SLv1X7E/knyA==","shasum":"e3ffc2d88da5a0eee39525b4dc181144d2aa5fb5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.e2e9777d.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqcCRA9TVsSAnZWagAA368P/R+Bm+GOlUT2Yqg93MQm\nrU0QRuUuQY4CegFobTQ1jD5O4QRRAzUf2bHaeNEl0V7n2sdXwWC3WN1krSRj\n0E80NJj8J1x8wxDs2TCnTctQAdgAX+UMyHDGkuRpOF0OjrQOMjkIpLtOcuMU\nQaFssrR8iLXBMNv+xS/l4CBg18Jd1IKtPPsrbrSKi68a8TshAlJYM17Vzcgz\nZwQMk57FLIBam6W8Rfgsaf7qryGCGPMC58l4wj9CVeoAZoSgidAL0bokpIZW\nkNKs+njfEf816q3VJx8Vn/AG4tczZSkmoPGKiG0dF11H9V/pmgKAGEIusqH3\nXGfURe77NnIBd2Oi28W6yaKt55EoIHf9TsAbJGQ9hERHas+AczSK7z0P2kHx\nqE9f0SKcE6g3Wzy0eULgEUvfUgP9t/dilYqj+Md6DXNMvOySXbdYmAwBRHmx\nI8gvp6t2lgcTQ1fRRCFqYJT0EEvP2NHwvHth4d9PnoQ4dDRp0NJQNxr3vNX6\nR29B+YbIorPv4Tsf8V4EntnDvBMP1vchA5QQWDbS2+6RsGeZLwGNW2W3R2O+\nb9zYbmAb1voC2leptolLfB5uyQamuPKpLUVoVWc3Wq4QTTGc19dDYBFX0JOm\n6bH9ntbwJpMHh6SaE6gIDkmtVIRMyFZpdGG5RpNgVXciR5VsRz/m/JKhLeFl\ncEmc\r\n=GVKs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6bA6QoP63ALCr1zFxeF3GvmWBl0k4ImCyx8NCr9GwBAiEArA5uQNN+z1MuXdNWxB23pnihCFSa7sDYFUQicaf5mLI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.e2e9777d.0_1628203676072_0.8891490952483725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.72ff1e68.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.b47dd37a6.0","@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-button":"0.23.0-canary.72ff1e68.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1D2govxviYSbG44zf4xpW9SJ55AaWQuiiwNKK50iCpBL/cU3t2J+aO8ZmmRluMHTmiBVFVtAv6EzbRk0cq3chA==","shasum":"f4de0b74c119f2bd1db3f2dd6e458e64c5fd5ac4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.72ff1e68.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBOCRA9TVsSAnZWagAAOyIP+gOwTzMD64QxRX3n2ajI\nIoQWLyBmrnc0dhVy6koFR/ZqgGtU0vZOkj0nKaNhuaYiaJXrGV8/i2PwUF2S\nasICRwhqqqHeYPo7XLB8vAk3yJKnT3IWSmcIN77oQsaRgDV16wAN9kCnrhpp\n0rQrkJb2QgA3uMsCpfixbrLQuY21g1hej4Y+GX0mtsY7ziZ4scrcMt8WzUBs\nJ0dZtl+Jm7oM6M7nQpbjw4m/6sSnWR9tXy+AnNlXSpfn8iGbK5SWWlZQIBF/\nYhstHkntV8ypXefuuBxU8kaxUwbiH7J2N9vrydnQ79wJu8J06Djo/YuVw4Go\ncCX/m1MMGP4DiZuxXaSmURe1EtCBfGsH4spcUy5NNo/S8OZH+0NgERNOEsPP\nDhmZttU2GIJHGz/D3NeC479GfA/ZHsChkcB/+swQReSn+uWuReUgoQ9DJxfl\np73QpLCd358dmkQyPLlHyHwcmAfBaQQIkOtEn3bNxWFd6BrhbIJGBvm3uFwC\nxdb67sQtYAfQKwF1fhnyQar1Fqvs6EKZTQr9AX9asRElN4CjoOHEnLsEKLjz\nuSP94WeFr56FJAykMclNpPMvf3ECeJQFC4S5uuzhBNV+CDVkHPmbqiWT0OhS\nsBzyWTo4n+5TEtRChgxegEnP9I++UJs83kzvGPV9pVdWJSL3MrP0v5PYmbFP\nmjJS\r\n=KdCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0Vist+aBzUWdYH6uJ5m3EIzuLiUA3EqKO/SSBrlYYoAiBTLVz6ggczpNqOdN7BWpR/fHLXhu13vdHnDS8z9/l3dQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.72ff1e68.0_1628282957810_0.4473975240551513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.c527e93b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.b47dd37a6.0","@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-button":"0.23.0-canary.c527e93b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iUOaZ1doIXXjKFVL4gftNnujwOJh5XFTEGdSIo2AqCin/7uo8bE/B4Dm2sqbYegh6MsZyMQDfJxNb/7LSYN0Bw==","shasum":"1f042073b7ef995c336db03ac5b134bfeeaa9cea","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.c527e93b.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVkCRA9TVsSAnZWagAALQEP/RQ5XdtDXB7ZuX/XPr4a\nEUydcj3eVrSzEhX8fLXyp5uMLO4M0fpPsUi1IPaHBzk5ADrmQMGiFRYkYzMe\ncN8NjGQ1nJLmV76BieO/NnNXTn3JyW7TvdPKaGstNcCqE3lBMw8wBc8ANoWa\n5isLh//wiywyhD1FoL6pK2g8cckeLwvd17i6cjHsxGg7lsvxm4p7mV/Nb2w9\nBm0tfE76EWl91tNpwUMUE1Cr039b9ST33JNiudLEgDxzf/sEll58tLqE3+fO\noAaOb30yiWQdp3K/lq+ZY8AQzma9wF47OPpl1XpZSzFjPG2w2lfEmC6no0Qo\n3mF5yOnMkgAioOl6czO0+Z8jRBzYrVpmifL1k5wCeRntj5gJPrzKvzwR47xO\n4ibJI7KvqYKQfgaY3UNcGuX60BeOHbqdhXcpHiV63H7AjBKM5uQ/osgmEqiv\n+N48t1n/VSl5RctDJdijFNtPxrPFscdjF/jfq3y+a6rPWpb+NccxdVPN2NHD\nGWRu2n0LY7JeQLLEVZA69qQ2FQEPxpLqSFnJ7bdK8uK1UTix9eXmzd1QarWh\n/6KE2nm+sQ/NItFb6utW+rbDnf4xSNVM22YgrHnQdf1CASajGmJ0BWNLMIXz\nAP0J3mKnePqGf8M02R3bNLytlz+BkiwGOtaqYYsyDmeXb8b1dxE4iNNVp+Mo\nuBS0\r\n=1fqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApkoTDlQ7n+7buq8Rlqtliu6wEjnITanF1Zeo42nsbvAiEAi0JYsmMChClzH88i+jb6pNzV7fl8LPka9jInFPHY9ZU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.c527e93b.0_1628284259842_0.5860833265412766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.78b1eaac.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.b47dd37a6.0","@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-button":"0.23.0-canary.78b1eaac.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J14JLQTynHjLqeYwN6dj2TzhpT5X2EnwsEMGI83MLrchTxJ+x19SjtU/KC4kAuyJAL/xWs0I+vlbL2xN3FoVNA==","shasum":"ca0c1184817e264398ea5bab00a209711d9e22e5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.78b1eaac.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4kCRA9TVsSAnZWagAAO+kP/jemD2VbkdGC9Dlwk97r\n3NgHCtn7uxz43jdCvCtWCJGdxlYeLXr9YNQ/J20+SHAB5+bi37SQ8PKHuF/m\n8maaxnyvTnbvzsRQB8nApDsBUa3/pojET99b4kS6At8kqxCId95fp+IHIvfM\nCGVnfCTBnBuFb/LkGSHoe9jbeE1IOlexDDJ7hQpTkhH2r524fQDiiN5IIGb4\nOZtekaSc4+u1ryVqRCz+/Jc9pXMJtEeVNH4yuHAHSxyKmrR7DOGZt3Y3IJmD\nR8reA6QW+uuha6HkYupRara0ayyaHbeXbgHV0x4IZ09GHmz9OuT4TWisPHS0\n7dF6ChqVVjSmxKqPCEy+vCrcCz4w1t9eXWIg9bBs23VRPYfNH4mbCVhRcbb8\njwFz/elHteYn6U6zEllA3Y/ZFfkjX0kw+QGBYDfyXM/U8buD5rcJ4lLrH5mU\ngeW6uM41jIVIUUvVJ+LxaMZi7DyXLZc/PkvDij+pHfm8zJCjYAJl5FYzhe0V\nV5SJGKnr04jDzqzpPD1jRWjazL6GMNhe7kRarTAs8UwsKQDOgWNtg++q9ksb\nJtOVx7w8mt21gAf0ciaaBEJQLmIqXEU/XR/d3abpUMXPbFENEgTyhKLe1ZVU\nTx4eGtRpV7rXExFyoA/Aic3cBPTh4DdjvVY431127Jlsht8EhUJS04E17Rb7\nsQdG\r\n=kALK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS82GHDSA3Ds9uqoemm5I2A7De38IMiJQLlfTLieHjTAIgRd2+pnCFKwgkB/hrxQT6KgW5qXGoRVE7iSCxZ2LbLR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.78b1eaac.0_1628532259915_0.9151431625882913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.7249a3060.0","@material/dom":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-button":"0.23.0-canary.a8a4ddc9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7249a3060.0","@material/feature-targeting":"=13.0.0-canary.7249a3060.0","@material/rtl":"=13.0.0-canary.7249a3060.0","@material/shape":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sP6Q1nlxPN7nEkKM1Ovu63mFk7hKpIzP8jhmlI2G+7I3xN72wPuYvWpb7M45nFQBdfZeJVQPkf6T7F8byE1+4w==","shasum":"18f42550f64cb2457e5bf174748592b8171f1db2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsm+CRA9TVsSAnZWagAA/ocP/3AcbJHWqyegTvozcXWM\neuazvSBYkPl8e9tayCKpgqyGct4lOXx53vqRQuNqkOWWumJgigPs/Oikvyvl\nS09EXFN4iq9hqj9LTGp6S51331Ee6aAygQA/mqkdaKihcJo2N1obY0vUIjC4\nTsX9rIRfq6EuL3y9hBWnb1lPeyea0JEiWMnVhl4Qevn4AlvcLgnBIugLuUKB\ndVU1lJHAfhq7J0jW92XeALVSZbxekTH3WgLVbVm4o0rEzeGXy5wfBltgGjr7\naFvPY3MKUDmrxxThf/UiAIXqq63iPe+bHQ9RLyoIHqhx9OtRz3qz+BdgLr8i\n+KrP9EBeLF27zlFRxK34srBXdfQiowxTTgbQoh/p25Ra6lzJvQA6msrB9A8K\nC2cqEpkh30CB1G+fqvv+rHVJDq9QT9X0A6CbJpfAZsiUaxFqEqTcsUbv6N+6\nd4WkbgjJRCcC+CkMHTN827wPwfctePbgBLMeqIZLhGK/hxr6OwJ8IxyuIaHs\n4d8iDhfACgEJGbBVJLG7ybdTgZJneGQPEucvleUgtU/ATim/i8+TCRYeCPpR\naJ2Ns2ArPX71NPa59XIp+ZD+662Jj0VAndGGZTkAySD9Hele3rpfGd3RjEnf\nSsXdohwiK2WeE+P+V9gjllBvMJ/6avlBDldLfumLQGozRZV+e5zSFhRoL2b0\n0l/Y\r\n=kO5s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaYYdnojvoOJKRgn+rXf+/rlwHDLGVjkoImcnoXzS2pAiBQBTjzU1XHE3zX9/+JzKam+ss1oSvsX6C9Awt2kaUmHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.a8a4ddc9.0_1628621245910_0.9721909268892435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.99fc0632.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.f4241a42a.0","@material/dom":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-button":"0.23.0-canary.99fc0632.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.f4241a42a.0","@material/feature-targeting":"=13.0.0-canary.f4241a42a.0","@material/rtl":"=13.0.0-canary.f4241a42a.0","@material/shape":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-swMntBI+/C/V0FEp2wieMOLU6bz3JEU3BE0mD2gqjjXLzHWJeE0bk0P5ESqh2WYfDy7yx2QvGGfrc0UnHgYAGw==","shasum":"68fd222f4895956c5b2584bbc7e1075c550fa80b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.99fc0632.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2NCRA9TVsSAnZWagAAWosP/idjtfp4Pa2FQXGdRkcA\nyffWcPSyuqr6QZSUaol+DicpjDut2XOdV1LtFL1T6COjDQg3EG7G6Gb656XQ\n2ERBzDg/N1fag2RnTidZNA8sZTZQHlw5s7Fg9bKoOHP+C8IU7r/a+wnZZhC1\npM3lzhtAVKhsPEQWDokpv81s/Kj/XagQDyYNxt5A3PRtgP53s0Ygewhefi/u\n2jNmz4PdXqo3Xt+mwVtSlHZrzxrKrNSSH0nXO9FWrQ/pkPCmxo2ME2uIggxA\nbAcSfo7Nog/eFF8BUdgDSutarAN4N2hBUvj659PzKVNV4VAueRI07j+H1Zpv\n6EHD9O5l5dAOfJ6EpcQ9nQbrr2rn0uGf2DPGGNNesvs8+8MTgobsn/VvA0x8\nOgZp5twdN2QSMRfwIBeMKqI7q7JIwI1m/gwLCpQmyzha2p5Y/vdEQB1vMOIE\nIVrgh0R/MpiRE+So4/MWh2aDPwYScwdQrEXcsncA+dHaftQT4py6SdhlXq2b\nk3fPULwx/zVfGfr6Xo5A8lE4ua9CG6RYDyPO4wcdhqc2bPjT81e927ayT6VC\nlho+MsuBNudZE5BtPG+5U7iKHCaN3g7dAqwyUqTECOoUCP0ue2VPloNMKumd\n7cuWgSZ2lymWVo+ohpkvuucec0PQRjkf7aioUjTKDkBnTr69mWpmN686h1mF\nwpti\r\n=GoCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSkf7Ckw3IcpRlr30veZH07twkPV8nSTi8B6NpgsIKpAiEA31Y67lcHsptu6xTCWjTc5a9DrfC7T4SfV3EDMFEuWOE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.99fc0632.0_1628720525502_0.7966788349291367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.3f47ae57.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.0ad12ed3c.0","@material/dom":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-button":"0.23.0-canary.3f47ae57.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"=13.0.0-canary.0ad12ed3c.0","@material/rtl":"=13.0.0-canary.0ad12ed3c.0","@material/shape":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C9q7mGm0nqVVBZZNLMKyc6d0yRneZEfpLPN+z+9UpgznvqZKjcw7EkKT877e/buUAxA3F9DxxR28K47A5uZ+6Q==","shasum":"9fc47ea606a7bcda2db304a9e331d555d54472c5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.3f47ae57.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWG9CRA9TVsSAnZWagAAjZkP+gN2IlvNF2Xfh3xb7qsq\nd7l7xt41SsA5nq/JsBV98pdnauKtKvVqXr3+uv/ZLeONlDNuVB0inEMRYV3+\nUSWImo2JqYPPKcsE1qRrY+BX1O6gu6aX8lk9STLrlGwMw+PspCmc5VsuKKjF\n9kxylo3c2z9WiPTJ9CovGmYqRJ8ou0+J1oUi6sFncX8huupAzncc8N/XKegP\nLYjQs/XePz/Nmjc9Qegxjv4xfMalhX+iJHYqcX7xLrCQFnBgowI3dNGZj0SC\ng35CikMabmf5GcEmEUhFmh1KRgdgOIWykiQjjd2OyfNIFvY1M/xknml3H1ze\nWDyQoS+V3Bm6wx5D86FLxvLiyh1cbTRqDa9SGjWEBlHCYwzA3gzPnkP/1wGE\nDkjhh5LfLGfovkz6wVdqOZ06xyTX0ACMiE7PG3ROk0/z3P+CQCegoLWtCksJ\n9gpko5ezIp08sQwCJV66wHEIzQLB9uXPpD1s35YXVqxXpmxFaKxn2oKDyImO\nDA8Oa3NBXdarOTXSl+mFp9JL1/LFItak4miedps4IvpdeonkI/e1vLX0wCBw\nqem0sney4KeGU/HGzu2u0VhuPgIWP1tnfNa47OOjLezuJfGe83KcP/3VoASm\nJxzwwHJz92DQ5BSlzQGvTkGeShDYZ9etNFq58CGkhPKGuA8FgkviExiOk9Jm\nGJPy\r\n=R9Ka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDE8tXd3B5CP2Q/x1sBi4RLYhPCVcy9wfKzy/70FzHaFAiAq/LncgOOobJkI4EEY6Eva39+BMTEi+mAVt8ITj/aGlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.3f47ae57.0_1628791229573_0.7025622662650275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.077dcfcfe.0","@material/dom":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-button":"0.23.0-canary.6b9bfc32.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"=13.0.0-canary.077dcfcfe.0","@material/rtl":"=13.0.0-canary.077dcfcfe.0","@material/shape":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CuSgvXZ+5louhShVdB0122WFzxzZGXmVkNXbr18oUdPiPLVtZTB/u5VBPxwVlP9jChi+kyiYymI7B/RcclFVbw==","shasum":"40ca30c16af2ffc59f6d83e6ec1d13c3f5760a3c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.6b9bfc32.0.tgz","fileCount":13,"unpackedSize":108543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdpCRA9TVsSAnZWagAAeYcP/iR+EEmUJWzYW72aMEFi\npe86kpfHFUCWHfE7D5BO+L2uHFxCINUQLRD8vLKVafL2a3s0/epejCnyWXFv\nAy0ReSdaqtKIXbAUtaZ9E3eqe8grDd7SNTaZ7x8pVHfF/fWHHLmvN9JneTpY\nQ3M3Gx02YWujEsZs51aOOzbyRQAfyDNQGuxDee7+LRWVYAPdZaA5+mSq3ReG\nMsrui5kQMZ5a6+FdMjJOIZc8fMIVk3Uv73yu7yxipyJ70EaHFxaVj08didw+\nuKeFg1dtfj3/6eBZp79xrVjx/Wr6GPBo5z7jwCqFIkwXOcR4Es8uYwYwU6UN\nwRagyq9BHTENCPizQ1RXy9MXkqlPDXldNdEU5YycdYIR05bfJyRQEY4TRyHD\nrMJqBySVvelrt2hdm2VyjNmg+JZ1ai/S0bArNjAE+rrR53IH6Bj2QBymwbsT\nh+zUwYVjBID8Xiy+mI1BarxMgnV6WNHEmSWBR81vxBXAl7m9caPioG3Z3Jud\nwk9wBh4ls5rd+xHaSjtQgrvrDN9pqLT7SyvFeS6d+824Ca1hc+Pexgcx7SEE\nAyUfUU4+QAQbj8eTRJRU8Mv2pXjCFUZZ47UJTvyRi9M7b9dNkqV+yViHv4kx\nfO9WzDW/GHDu7nv7m4RXyEbRcBqRd0L2RfK5piibwpssqpCMAzI/Z0kRGaNH\nyD24\r\n=9MfM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCugX2DBcrwUKv2sGPTX4lz0eaLMo/1RlLsopp1M3WdfgIhAJmaaf3BrE78yk5wmK7RmpqAg326lD77cw8TQTE5nlTE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.6b9bfc32.0_1628792680990_0.5444063040442539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.c89ecc63.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.2fb068fb0.0","@material/dom":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-button":"0.23.0-canary.c89ecc63.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"=13.0.0-canary.2fb068fb0.0","@material/rtl":"=13.0.0-canary.2fb068fb0.0","@material/shape":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4H3hewjQ0vKUcGoWkuWVkwczr4R4M1HxfQbxu39xqeQXYkxCVwxTzFW8YFy4ibZRXGy7HBdzFskFSy2ssqemNg==","shasum":"2bb846d949d56732fb0fa021545d6a02ef2b0fc5","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.c89ecc63.0.tgz","fileCount":13,"unpackedSize":108521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2lCRA9TVsSAnZWagAA7JoP/REQXkQ0RuKOxRTnFi93\n5xh5SElvooWI4LBtzFFM8v1R0ts4n6HlypVFNSnNF/m3L3dUo66Y4dc3XX08\n4kszpMHhogyFGa4uxVUFtx7vSA7EwTXw6TVqEouFMUhhy7jxJtGkE20J1wkz\nDgQg2dwlEepYKMzcQkGqdEN0bcfvXIAMU+g6XdaihDauQhe9F8KPRjoudX1k\ne5VCtQFym4I2iA/4ocZ7KfmtUeUmLzLYdoTfqjmFDw0om/lldH34QJ3z0Dvt\nfet4CIMFeeCpjnI9l2K6Y0lHQM7KnlQ28KHT8GmNMS9gpA+waKKLnDJP0avg\nTzNSQT7u6Q+n5jp52FCtUhCbOmxlnq/Tzp2GCuqwqIvQWGE5FZFKm/PEboq5\ndr7flKsfxxTVbkhiK3VXh3o3PY9kAv6EMkyrNxTGJ9bGLFmg0DUTC7tQAdlu\nUUCx1ZJasXex/5QwfGE0CK0IPeYtu2xsNfgdpta+8LreKAF8w87eJ2EIeI90\nuZeVsr/87EbQqENBfqsTqe813LPy3ncyVkmxPr+b8rlHgOYoK4y/RkTzgtCN\n88757PJHozgvE6jqwcUJnDZRFTOUk9+lvZ2/2bg2vb9Ic4TFUDpGJUQTDTpZ\nxbpYMYj12u3c/a7EkRR53pGB70G7LUVEWyOgAqLZBhTiA62KRM4RrDuG249U\n4T4F\r\n=EC6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJLLc17kwF0gYWztvINUI5J4KX1rFGbVsQjWQ76gxSKgIgIKNf3/XZNgfrfl4GOKF8fqYIYlW23cM7oxeVw/aeNXo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.c89ecc63.0_1629134244943_0.6878334452230424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.59de86bd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.457d89aad.0","@material/dom":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-button":"0.23.0-canary.59de86bd.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.457d89aad.0","@material/feature-targeting":"=13.0.0-canary.457d89aad.0","@material/rtl":"=13.0.0-canary.457d89aad.0","@material/shape":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7LD2nbj0q80Q276V0OLO5umMRWIRv2ZTbBePFjuzgL7xOWczGu8pn7OXhim3OhLFaP0gUWoDM5F1s4jRepUBLg==","shasum":"783062e5566e92d54fc647f2bc28efcf4a63cd68","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.59de86bd.0.tgz","fileCount":13,"unpackedSize":108521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGStCRA9TVsSAnZWagAAqcQP/1VHQUZsRV+Fah4eJC1H\nJV2NxbCFPAqhWSlupuCInWoErJg+4JCdnNoYYZ+BPdFD1hdFb8RYlbylpnqh\nXsRhDKsmmqfcxml0ZboHkm0S2p5mbZfX1yKUkdYuH/DJtH2J4p4+5d5A/LGj\noHIFxw+W0x0r8BXPSiXpXxH7m32VPLRecxi7K6px5dDipErVOJZLCYCrE+7U\nE/izJL/KiB8sKCaeGqspox1y8gj8lp4IDBnigcS/sXvcA8PrjN0dy85FD0io\nFJK5FT9PPaEhGhbWQ/3Twbfv7HCbK/4iFBdLqMjGXiowbO7L06HGo2y2rMsD\nAkkhImZ9Lyz059P0zR3PxTlCWXg/6CUE2q2Vyv0Es5LhGwS1x9NDOvQtrfg4\nRy49lJd/1bcnbRhT9+cBK6RiNeyq1i2Fa4/ABuM0NC98c5tVpZxjrZUJm24l\nQUXFXSDkRb23V+7+xv0CEJ/FWw2g/JZnleIejmwPuzYrHDzDu4Q8BTR5wgea\n9qy52iessbc38w8RWsWzD9pRsYSACHyyHwL+x3OrG3kzAQ09T/VE/Vt8Btj0\n9epVxu7gUvERrMr9PgKUVV+XnUGOB1mJWjE7Ph4Xavjcm1a2T5tRdetN9WfZ\nQXyKM8Lsk9SePjwYFS6NyK+LG1WVJSm/kIKZj4LC0VVeFgE08Qw6yh0yy4WE\n9VEP\r\n=5P2m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDoIjGVHg4BNlyLVlq0Ng1Z/alZInyia99quTFJxGZygIhAIjPsqlbp82wNLMxEEG1EI41P4DmBJy5AUU9udTiCrrs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.59de86bd.0_1629250733187_0.6509034898365311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.dcda879b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.43d2eed2a.0","@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-button":"0.23.0-canary.dcda879b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iAyIM6T/2JcC6T4uvwDDFC2+9xxO8CYmGS8Y3voU5zTLnyAbRb9IIsXvwBf1NQHgdY7ic09gtoQiRMvNznjHKQ==","shasum":"08782cc89fa2f6a55fe152f334dcb04f2f3b1a2b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.dcda879b.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhxCRA9TVsSAnZWagAAFlsQAKA1fpyTSD9a5ukR6iI+\nr5UmAuHprscAvMoM26GZ/eRGKiDOuWQGD8yquXYKXBVH01uRoWyhtUsCYvGc\nx9rZiLpSJ4op5M8vsyHbGLzuA6GlG5v57sNcFIqXqsJeGvKMcozhOVK5J4sM\nL+AR2fHKxA6WgIKoJ3Btt7zOZsjxYc6W2H7S3CNOg9Tf4ZpIaQN0WatX6qz8\nVlECp0u3b0CH1uVWjJ2pceF8MHC5CMfk8sIyCS/u6DKVZSBLtYROHC4CQ8Eo\nxfwbRDPjKXA4sjEOb0lpTRMxD9UL5bTkUbG5J8fA75qlf3i5NrZj1rkAlfz4\nBWYgPUUCrNXZa656PrgxZGYjS8Glm2LoCKoiSqUQAKNN6yCD7E18vfNDKe1g\nDDYGUfZ7J4Pw0ENO5knH1OJwsgpJFEsy9vbPx+L/fX5esBNlfu4jcuN8qcrC\nFx6uJ5XZPB+Ri0Y4cCBhgw+QeIbs4lP7e3BHAp3pCCr5zuh5vKgWFfLvQHi2\nVtbvQJU/pR6k+5spWCUhRhsAoUJMa7veUuKWdBTtSPXY5vCoX30MS6iJyqy2\nnzzGdQv8uyPNlYlakdazMLwZ+3haO+L2uQqGjhrQ+nSljvY2ly54/IS4DMPf\n8joqURlSzJ5ZW98ZLP1Us5170Obl5otXWrLC8eoPZ67uqMG7p0Vzn92wyNR1\n/rG1\r\n=vwuK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7mSjBRMmEfcxSP4xYCrr+JLAI9VtA6HnyM5jNfhZrhQIhAJZDXGryxPn/84dnDFsanxtBrkUAwmCRpQM183qeuziE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.dcda879b.0_1629325425443_0.9550330731164536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.dbb8b366.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.43d2eed2a.0","@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-button":"0.23.0-canary.dbb8b366.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vtbkaxp7K10JATasPLZyk4a7BctdUMq+6hAWy9KVvblVty5ufPl1whG/JXw5ctAa5aO8OqOwpk/dibSR86VBng==","shasum":"aa5b98dfd069fdce17724a54f1246a851e41cc05","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.dbb8b366.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKgCRA9TVsSAnZWagAAnwAP/jPPdEeeo0iu9Kcg005V\nGubtcDpb7gtjyj6K2UpAw2GuQktaYby8uXxtp8XbUF7OknkCl5t0fLk663Sp\npq/xxhr4jAchvwOqSY4XnDdNNIJEy6O0HGEZ+rDGNzMgV3fKiWQi9/X4/juU\nDw4RcxEok3t5vL5bH1eQZxHs/6HvNibKZhbSyZK4fYQiI/ydcqQxgbmI/Zmw\nUjiJw5Rd36GYm5uecUT/8SBwX6TXFVcChNrsTZTv3Xzgon8j69LgMmObGnoE\nPebrPPKXTJlK0lY5JlwOBmXP75IBA8xsF9L2JEQlJA4MOSsi0Mfe7ki7CD92\njXn24NzpHvgF1TkRmOD6BU4VRQuPSXYchTfzXqounassD3jBFnE5eT3FljUK\ngtfSw2LeYDqnlOs2tqqAtk8sQ20ClBVOHa8iwk7L+K6mNUrAksAEGgb3izwV\nyA/e1585t2nDydcOyMPuXy0cUumsAeqlA89CKfmhHMZSFwEI/gjsyZTyRIJH\nOAiyYHJOmOP0DUY0Qhncg6rvVL7tntFx/NHGFAkIXNZO0GYEu76C/yMIEeQA\n7WKk3ZG0I6TwZ+oraKc6PkvwO8eLvfoDLZRLcEDYri0BnsDoofxeAuTd+iJb\njxACWRdgW3khLIVmR52B4G0RcYtjQwB8y0u8tk2ICYfnsaJexfAVkfNJTJ9W\nxpQa\r\n=EtDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEQyeOUiFdMxCXzf6wcULr+8Zrj+hA2u6ZYGBBSZHgxAiEAsVEj2ncN9qXb7yl2Rb5kscqufni9lO75UW0n1NYw2g4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.dbb8b366.0_1629414048351_0.3136521474599183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.c6e3060c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.43d2eed2a.0","@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-button":"0.23.0-canary.c6e3060c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w8HyUKrbjz0VSOW4R5tNq+AdkrEhsTNJLbsYTJjxuxqm8vB3uyuB5CLVPa7X8Uk3PuFzB2aZvLkHZRKcbqARpQ==","shasum":"18859807b0778554eb82ff63816402edd1bfa771","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.c6e3060c.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMPCRA9TVsSAnZWagAAsKsP/i1Uiut/06NovyQbpyae\nIGyMagxYZ5UcyHB3h2Q94qbcBlIy0cyhkfKAgv8vRUoxn6LqyMi/At1dzNLn\neQqEEQankccoHVgwgBDIF7fmSFX/rgwjJJsME+XZe2Y+whmA2fl1KKoJuZgb\neFp8uqDkC4PCl7yw72kpPX6E72i1FPbJF9miE/bMObYs2WkcQk31gITZUChB\n1beh42wKmvaRfui2LvPytAXcuqQM+GOnqUvxYUvd7xfhzcExALDa5ojdrPPJ\npcLJvt2HsyfsC7qiPaZhY6/SFkUKIYK0cHozzR2+Vlcsvd2dEtYFxVIXSEJn\nxK6HMP4xMA5Pm8ipgzxRRvt2w9BABDMu4IFlQpNFv+GHjhogFGtGl10d5sdC\nei4iuAzZwnzuEJlec8zcnmWbatq6u7m3XlqMKh2NFKG/J1AQkqblVOQqOS0N\n/50QyK5o+v8j9PSFHP3yjApdQgb9rEtSNF9qpIIW1rTfOw4e0fbnpvPSQxWM\n6MJ+5ZqjGz5zf8+tKOC+QMrqgxQifatm6JNly7gtVioeprk50AhY+7idfHV9\nbtQPTrSbaKEI8wdloIScuxk6y9ALOmSF/Ic/l6FkI633clnwlTizlDgJ7VMN\nSyHcnJ2kN0KP6hgsUkoIWEmCplB2ESOKjmnqHmGbHvbyyxTsbe0EBcLZ2NNH\n5yoC\r\n=mQ4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7gnoKf/0q0NEUnX5kXrLus3JA7vJHpjLpfMTWDp4FqgIgGueZfg6lB9lzvGFXDNsA2ZAnWlyn37BZxBj5ynMHfV0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.c6e3060c.0_1629414159034_0.885954286787441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.03120b7d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.0a9069300.0","@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-button":"0.23.0-canary.03120b7d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uPmSPOfrLN6dfkWht9F0AKKOfxFZw9JCtKCozVOshxLMsW8zowsZWdKTVT9/8iKFkmkja5u4TTf/h3dHRWUb4Q==","shasum":"2c4d8234c226a6eb74a45c0ef0ff6cc595482d12","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.03120b7d.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcDCRA9TVsSAnZWagAAjwgQAJ6SEkJv1Jb2akplAShj\nvqJ2sNBSbRrE09MX8p9+J5GKo3NjXCZer6aroi5nujCSkCd0yUpqqTZcOxtx\nTtNfviNuYL2TO51w4dGkmdhcDXS61CSGOAEJBLFAiBQMsGPLxrWEPKePWoAg\n4BSi9T08wTpXS6aXiUtlJt+Jrnoin+LNlG5YLLkXeKv90vYNA5s1NfCc1z/B\nhdFh9023LZpRTgFUnI0qQ6JTFffoae12RRap4OPtfwQwZrSPwoXH+Ny2FWf+\nxXBVBeSqtvnRdP6xB4dofUXNW/k4zFoGCrnFF3dYT6de3wkbPx+SHAfw/JTl\nnkrmMNX3iSPBG1RH0PI85JJ0Z/NJAtJLjLkQuKS/ouZyvJ0juDzRmgDsw97f\ndytw74yxxR+4troVdup2IFizHf9qCPHN8ZwtgHTl7ElLeXuB6QiXKTRKJw0/\npaa80XoYWSSDZfokf1QWNPcUpGutr4wfLY8LtyC4zZXkvOsuDFbPVA06V04E\n7gaqF2Enoxzqt6WgzBZLB0/gkuo/gaLH+Db6en2FtSFexberDXjFf98b1hIt\ndSjp0sJrl+lqjUQIw797A9tvOsDFTs3zQrfKYuyW0sAdSnDCnbjliQ34QIMQ\nP69o6p+co7pc8HCyGeS2Bd1IIHxxywAcTuBrz9YBBwSoAOMNQ0CLiGQ3iUFv\nKsj3\r\n=hht2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHddMNXVcqOyg6qSOxGJO2Iw+rUeeJsXH7UwFvTQUZ50AiAArK3vM4EWxipbTnTfglzC7vA+LXulxhMxU89mKeNq/g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.03120b7d.0_1629419267627_0.4452961946344245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.d75a5f74.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.0a9069300.0","@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-button":"0.23.0-canary.d75a5f74.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tQuBJuUv5i5tvsuqSJSu0WUMfbZR0l+B4Qdk766+HFeLMfv7Fx7PKByr0/GhWvADWYf9i+c/a2YbU3iSK/FXJg==","shasum":"2d2bb9e45621aee3d345644996d4e8ed6d618fc6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.d75a5f74.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BKCRA9TVsSAnZWagAA4y4QAIkWA/QIvVvaUq3Oa6FZ\nGynu9RFy482xLfdEu2Qe+wdhsu6jRi3tgVJbxFUade4hwAbxqIP9fv1s6fvR\npez4J5MKbms7NiTQpxg9DhegY1cfFHlLZgmE/rva6O71equAvKAkA4olhDkh\nA44wQdjhy6oeHTv2I2QtN4FfodGiSgXY6HxbTIhPF6TpYvuklKsOmOIGmDWW\n/rLMtzn/bpqrTg6F3KeHWRWnqTWw9JbxOB4MFMVoQUcL6QhT5gHYZBAxJ2V/\na95epyfowCJwJJpjhR6SfBrl+M8MpCbH+Yj4Z2GVkrtCbkz++FUoDON7OdGX\nRh4D3mdeUr1cmV933SO81KzIXDPoqyMpBPEPkIRKqhKyrCvVbp0mnWy4t00a\ni3Qs/K5kuPt73G/8kmfL2+YV/dHme2i0B2mABs3qzHxoaEHZe3EZAXDyyKQs\n+zxG3upwKNz1R3VffdxGdpLWJSj2HSsNjYRqGDbzLV97nD6zMgIZLrwhJ36U\nrd63EvaXFIcW6gNHpVHRlAFb5O5lZxk5jJ4YLJvaQIJhL0zrBcIMJ3kOemji\nVo+nLJjlpgqc8r1tbn0SyWP5xqHG71x6XkTvdVAwl87FbTsE4cB5HQMm2CuI\n8GCYxKSbMWB9UqC2wfGPKLhdHHsMaX6W/6CIQOxlxaEX5nFJhv6M3xBT+jGR\n/ZuA\r\n=hx5z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAMGUvzx+5lLXPJqUF/kkK9jgDv+g4zi/UrCive8Z3owIgHbaEc7kjkxa1HJr2sGn+AzpYZlQNuBeYrkqjtAScgA4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.d75a5f74.0_1629446218534_0.2971547605167859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.0a9069300.0","@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-button":"0.23.0-canary.3d79ffe7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QYPyHbAsYNznb+lkgh3B+4quk2ZrTLWO8xZLABc68fI4ga3drO5w+sIRR5jTsZvaB5xsOiNbAtwqrsGsuRbGwA==","shasum":"019513b5b1c06f5a5eb0cf8bcce653aec8475616","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.3d79ffe7.0.tgz","fileCount":13,"unpackedSize":108643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+S2CRA9TVsSAnZWagAAuEMP/1paYt9QZWTKOoNqxKja\nUWx8pIMptjpIp8yPGwlpv9Akm6fqp8v8Dzb12V7VhxXGiv5hqCf68/r0jV/R\nTgwfOIaXUrpkqV9MyPkb1TQo60QwPz9oB1EISo0RmmiICpstS/PWVpVY6mSU\nPIp7Jp+WGG5d7ANJFTWOhusR1RxQCyAgUL04+qj+kiJDt9gmfrNe5uOl+JGt\nOvTKOYaLnsTUiBPIvUgrp7GVB6BU8cbbn0yqIrmc0EwKbgU2mHq/2WEP2pMc\nYYBDd3DuqQ4Cg/naxvlo+IwNcgDGFR7MeFr56nxicASguAQTXYYKapWcjf0d\n25gOndZieZSp/3ADD97CUnfpW/2HdgFqjbQAV2oMmjKomX/4ZfmoTO3BozK5\nMPBmm85htMJUTxMZjjNGZhRmGDEh/0CHdEtk21aMVZe0Lm+xJOSgHWeHLSH4\n+McPIfElz+mvtFgwIRsfcIYOuq/6noY0V1rdLecFsYQH/mZo0uSSQh0EB0I+\nJry5Q55Avhr90J+EIcJoww4qftJRbpfqYR3QvQHPDNnp3oNierYMq1BV2xA+\n5vbgct9mZi2+1oEWRdXzkoxxwX/bIej06fnp2mz9EXwCbXpmPR/nHbfODd8d\nNyVVBydOM0dplPcuqQhDxS5EL30nMIw30icjzgq7xWZfDl4UQa4G+o8yZXxo\nd8c7\r\n=b1mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzvCwUbzsuIdW/yTgfcHpFT9oEymvysDvO6wL/Q0igkAiBXqsl06tlDpsW9Vt/FwOZ/EbJs1wjOPMV+OaSqy2pqAg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.3d79ffe7.0_1629480117963_0.2954089488432956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.02213ebe.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.0a9069300.0","@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-button":"0.23.0-canary.02213ebe.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.0a9069300.0","@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KNVvBWmnXSrwqU44CpmQQofXkdCT6liZN5Qbi37GnAIT8c0MrmKj9QVOsUCZ+WSTjhJCbMRl6MpA2UiJTtg4Xw==","shasum":"199450782f64eec2daaeb07c52bfd591492ed457","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.02213ebe.0.tgz","fileCount":13,"unpackedSize":108712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XUCRA9TVsSAnZWagAAlZ0QAIFAaYI+B/ajTyyPh7/B\nT0A/Mi/6ovxTw4sqrp450BXcppZ2zoSFG86O8YClqpFy8LS4xEOpjrIeJSZn\n2BCC8qLAmNCLp7wfNwg6eAt0lDLkLkLPH8bnBdb2wZI3Ye3gD8GfdKs2Hu1G\nsE8p77eqCKMkD4+RgUCoRH6Ov02Qq9XxXxSJW+TqpzpQsGBI70ujBQ/Uclid\naXoveRGfApCrYCmJHUM3TiC6S6Fj5q1ulZcWjMKSsUbHFCW2+5dRi/06+hRo\noS1POt4jTqFJAl+jt3nFU96FMO+LI0eeL42wb45B1JTdrMy2xaLVySo8R8EO\nSvXMt5whNWCJh8UerzIQr7goH0ijlj78UwA1efGv6FCgliIXysJXv2o2KHCt\nzG8HLmcmv1XQTNykpWUd+so3o6C1RAQ6+OXb5T612gnXbjucgLO0oaALCC9+\n4Sdpy4VQGoOm/P1xSfOqQeAAV7mqvd+ejcTKFyIadSgNU2UJeCBpBIqWwuFo\nhy/etUgZkTwYOCt4OnlMf4siKThiZ4G7ZrIYajJUNPGkquyxI7EIYVIZAo6L\nQTEg2sl3B3IZfk8jDuCZ+Y7f5cHfio0KaBHIWZvIiqjyJXZPRnSFYEETnupO\ncLoJCMq6g/JQ6dnT5sEchjlENiVES2iUol7WvP32v/E7lU4RGWCzu/QIRdXc\n5DDt\r\n=D2ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcWR8Y8ilJYIqSRd65ER7KPzl2A8FJNfcyw/fUNvynTAIgTLJqgLnnSxnuSNCPo71KmPMDyr6xJq3A1ocyPvXQ+Hw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.02213ebe.0_1629480404370_0.7302274299496891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.90a999b9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.7da413ed8.0","@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-button":"0.23.0-canary.90a999b9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YcaQ1goZRdKlEoxC1m08mzzVRIS9yO3M1x3ynU8HQWguSC+tLa9fD1lqct2NBQAPhTy9drUPxDkdRljBi/lpOg==","shasum":"03199cb31281eefe8ea85cf10065484496500c84","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.90a999b9.0.tgz","fileCount":13,"unpackedSize":108712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/e7CRA9TVsSAnZWagAAuTQP/3iit7s8wUnLY10AlgTf\nfQ4Uz92RLU6wZHE86zZfDYtWKk/dzCkl8CRC/wLOoIJRfhKN0wZRme0W/7q3\nFp46DTWT+aeSheboPEPiZ6bixrujMxhHDVIDxDsGZ7qARx2F805h9NeuBHcG\nIjWTIwNYXRVcDCZKCD98n0ak0nWDUHMMfllMb77KVUJfwllA7Yg16PpmUP6D\n01peR8YmlAjExbb10sso+muMb9widVwO0qzU7H4ZmkdllfBeBI+eNUndit8L\nHHyqa6+izSm/H4Y6BIPnkWp0M47642QTq3S5tWN/OogtG6WTxMEdYY69C+NW\nJAMv+obE9zvBmk2VZc+AGX9XoWc01inR5DcJe/ItG2ozVg7JsjvJbLcyseB8\nI5vJSlMBRsuG+dH07V3OPaNurS/pVK3a/zNDJum8XnmOYVaX72fKIv9GcVHI\nbPOpGmpq8usKMoKARB3kyLFB0qK7WLPrfkYb0TjEV2+y3tmyXYewxeM5rr02\nex/bf2JsR9aGgCjsUiZBPTpEp70fMo+SGVma0/RfKicbXqAoBnCfosxn6LV8\npDaTWlgTw7PHAmX6Lv/RG+ThbkR6LuOlDDt0fp9g0g+41p/vh3AnsoClcwWP\nGWc1sHlRIX+u8Uc1xUrQJ/jV64FeYaMYVcGgheDF1Z9B94hy1dAKLLHa7WZv\n5sbe\r\n=Y2QZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGpjWLqsd37PhEMJNCxBoJhUjsa7adttJYks1ML46NBAiEAuN5bw5XVYkrTAL0zrzPjBbj9TYm4/40E9gcQopZOacc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.90a999b9.0_1629484987172_0.8209008857824422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.6db58716.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.7da413ed8.0","@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-button":"0.23.0-canary.6db58716.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MiB8t/yRnUbNrgRePP8hSBmvLLo+cSFdHii7tw8ybv0WXHTNmtUzyH3/0dIhAmKnc2TT+o+6UJmvOOWXgkqQIQ==","shasum":"c23bd34223604b7f1d245c994838963ee0383623","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.6db58716.0.tgz","fileCount":13,"unpackedSize":108712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WPCRA9TVsSAnZWagAAYs0P/jyHtbUcRa99+GXP+XTw\nBLt5W8FzQhPVbGvZUi/WKS+I+fE4DKtkzh5FpCNWKOMs8RkvzsyLkfS6Fblp\ncfNVk/8Nt5bIeRxDAt6ivzsHswk7RNmT+CSEPYgWfmLpHkEFdHGKseZ/L43x\ngTaFuGeYs2qIWbDVrMm/kl64o4bdMnQaU8QI5K/qsos+AIaudATjaydgytzF\nhO2OUsyIInZWr8+tLZ6s3eeQwMOYBox10eoak6DmvRnmMpxoEittCUURzJTz\nAYqhFK3KoQS6lKKeGsy/DnIpgXyj7dZaN4lRpLUTYelheqrI5yByN4r1p9Re\nVaqIMelemfDrvwDfSGRzfBNO6tlBh1fvDJmmn2cB/NQrdT/W0dEjMd149vZ7\nfOYvaGhKy0I6qIGi4yulLN6JJ8ICt180LHQZjkk4hoJU647Q5SJNT+EM0iyr\nSrkcbgvwF6qkuo/8yGZlw7RiHv1/89Tlz2h4ynEYnceNUFoevM7G/pEzZnL8\nL1v7x9CCoQi9DB21lTylNU5Yvgp2CSMwNTO/YzvQD93w60SSBqylS7kEcXK1\nurcGfJApu3mqDNo+NAItMBOb7d1gU8072R6ORk0yOoTLXc8DbLDu2l7VTH71\nfNV9GIwDfhLbuls6ZMJEGMtphJfQuuas0OMQaOFCmySd5yiuX6KuRujyFNQp\nMP5c\r\n=tdmi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGq7Wh7gF5qbno7sqXrm/pAxc6o5Mbu/racOv8M6YbDLAiEAhtliBRsuXkJzcZ3gjZPdJb7xjC89SfZ5Hj6SsLg+79w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.6db58716.0_1629709711744_0.8130747349930851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.7da413ed8.0","@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-button":"0.23.0-canary.9fb5bc35.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ecqOwGAUCF1Q8OHu+wEzKwZb39jhWuhnK61KuA/1wGWNwACNkqJAk/6Xm7XCKTa5G5h4hc+QLkNgu1ej/HtA8g==","shasum":"dd3576230884bfdde357f27ad94ac334359a1a34","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.9fb5bc35.0.tgz","fileCount":15,"unpackedSize":109439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZJCRA9TVsSAnZWagAACSIP/2k0t8pRjovus2ChA/rn\n/8RBezjWkAUzYvbrDPwITk7V809ANQwoaDLeokYgyUXI/QJVCZPEpwWxLsXT\np2dh/nxNhMsfsVv4HzrBZn/snQk3ZPUTK8nN5dvfehOSJxFo0WpGZH525Wa7\nD6zgzefN8YiLQkh00pNxgJowFbMHZEzcfs4+t1rAkTcpjGlIeUcVCPBqemZ5\nxt3C0wsV8ELWTCfm8fuwVimgfoIqk6eehPzPgwkcEWiRrD5ynmJtY2Emtik5\nC9I1kw9GtXqvVMLKifRB2g1DZmXGorBMrM5XuXKizHPp0lv6CqyPZsBFKTEi\nnWLlA11Ztk3NctpSNrvKB2xVIwmMqcZhi/yua0F6sis4k/kOAhTNYZqih1lT\na1jtfteypuP7LngaAHUcq1sqKzbhoMgFFL8EnK6Hff2wX9+d8dohoR0DZolL\n/DJQ1C/3orqQAG4I0RsopgGXVFguqY9l3OSoi7eqddofdzt+cSKfwfGUYx/V\n9rRvg+uGw+M8cMaKAAfxndDGGW531Q0dkrOSwBm4vHNnSJj1JAb5hv1CwKk+\nmUThfhXNg+s3NqahKGH/8rBqYcjrxcAesQbKoO5K7vZkLKSDVO/DMQHcWyMQ\nFfWITsYtWEARzhRKyOdcli6H4UIxWOH00IJHziyirDqxMdi8I9LYYkzatwuh\nwmps\r\n=ZjAd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8Wc0CC+nJtXe7S5i45vPyuBxTQZyEu6j5m2aO37Za6gIgcKPybrsKAXkG2u290yLa33WXsrshclJ247uczwuYOTk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.9fb5bc35.0_1629759048967_0.6946069739631833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-button":"0.23.0-canary.ddaa5d8e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QXoqUzmqGFqmpObqv+KDLy/EFYvD6e+RnwIF1hBR/EMLaphYk4tKHBYhkpgG/YS9g9MUlG4Pqm6+kEsLhxii8A==","shasum":"bb67598e92cbf546b27ac04bea1ae48b4a2bd41a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9uCRA9TVsSAnZWagAAzBkP/jcIeaAHFVVuzMgaDkuW\nH2ORdCpHc3MgQgq0Tt6duj0IGC8lDs/4fZQIuI/m1WMj4ZmAfmvVEJbqEBEi\nIqIaDx9+v7EAshk2pnx2SkpJvuEvibXL91ec227GFuSXzO3t9gv9GjBHdXSV\n+xeJUyDxrQu1E+ju4A7WgZzHAYVlpT/HNOOTKPMI3Z+XrNZq+fMU81yBqcI2\nLtU+KtZ2YImBZUTRBJWLGp1uhOD0cL4/8bu+tJMeCa1ExfMB6Kn1S7G6XWFB\n3uiDJ0f1r+Ksv5nBz1Z4HhmVCTdi2AZgzkekeJZbcGY26I8w0jJX1Q6M1tKf\naQr1bXCuxGor9sAHB4wtVLzpMWPr0iJKrGoL4aB7rYQrYe+g/52+jA/PHP4g\nyABLkLTRscnkimUDMWgX924Uw37ZvJc+yyOpdWcapdfSafLcVBsQpjHT3/sn\nXw4CLd69ubTL3n33VDPPB58MUAMJdyqgCXS/6KNl9rSiQmqzJYwTI3gr/aqH\nE2jatUVEsnCyr1BuYnuUEXXtKx8apcvT+cpyhm/YgLhFOtYG5igdyYFGL6WP\nA0NDup6hCK9D3nL12IG7R88rKiOxOKMx3Rb6rxvNwG3EBkvIMhR1sUD9Ega5\n1p6/MxIg3pJjESiIhylOj4RgUsWioIobEHNZfXDU0m645Fg4iBaDa8/LX//B\nY+M6\r\n=hYYw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXQwsguaFgjuSxALX9xsuHhKhFTiu0jjLMFATifG+QCAiEA/kG/jkKnLPk5CTuf7YOGq/R1SenEvqnb+ysfpT7hj9U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.ddaa5d8e.0_1629831021989_0.21913934967897508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.756208fb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-button":"0.23.0-canary.756208fb.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OiXpbtlf1RgN34xkOjmRukyFUV1oSa43D7sR+PmTUxiWhoskUYAt1Z6x9YhiLT91qdlHvsmOFeTMpITO3JSO9g==","shasum":"0241c52b7b61adf390087453858c328f1ae41ca2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.756208fb.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp81CRA9TVsSAnZWagAAspUP/0lMVaw3oHzm39ZN/i71\nKB3ZNJT3wF5yTLtx8NEbPgiJsCGlC/NGQcb/8OPKIGvrV8bjI2/ahzAU9FhX\nscdwpoXB9lcmwH6gQj1P5/5c1hhXBZJ5xwHPuliVbKUJfi95I+sM0PtSPVTY\n/75Ap/wZ3YfVvspN41iBCNmOVuMC4hSiG7ch86GAWFTm7c/OS/3iU0p2tlis\ncsuKQvVAxcEgisyz6GY6EB+J6Sbz93ciFq1HKdMNj8ZaVGnT6hJMllmjkKm9\nu/kRlyaOr6svSmTIm0cn62Yrgvx3TC/t76v7A4kxNm4zhHEuTcZgGsRmLvv3\n9QEj5/vAKRFywiqCTRjcsgGxvoZLp7usK6rFBEh6e/P/Zm4GuE7x+ROKJqeY\naLlPSkx7AgXrOchwvOZVSgg3WrDLf6ZxIpNuuP12SkWHFSNnwmmSOBrsyWzV\njRi1UXqWuzWgj0mquOHfZcItkpNqEzLjon7yzvrZ6iLSdayizPN9bBmeakYe\n0L650GPA0Ryo35BGwupPFJf4PYr3I8Fas9nhBASgbadOhTyFyGewNOqKR+Xo\nLB2HLV2Cc/Q/z1oUbjVag+bndrK1qG/CYo0U+xc19IliX3aq6M6+X4Z30qHU\n8TkvDFLvBnBCZaqwZZLgLeWZ5hAGlBFZ7s38bkL5CZPuCCAxbVaCdZxHgyi7\ngKfP\r\n=0n2F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0V0obc680eowrD/2FfUa08u/BLzA94v3MlEFC96OyOAIgBnkKv75N3au8zDYr+6Z9cukddxJsxlm5Xo4hbJnfKbM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.756208fb.0_1629921077215_0.9122448707641155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.9576dcd9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-button":"0.23.0-canary.9576dcd9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6gARxXB86pS8lMjCYuDcAAW3ZUI2qu6BByQdW4e6g8yievChUvG0TF8c390zRLQNj2SeY3OExV4rjY4T4e3OtQ==","shasum":"7c0422cf78622ea55826bf739a45a67df2c79b7f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.9576dcd9.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrm6CRA9TVsSAnZWagAA90IQAIHy/8pErFvSbl0t7JCO\nb16NumILMW5HwF3KTJ4ORLdV2uRZMkYLuGS7g06928XXoCE6AMMT6UZBxHCd\n95vGakO1uHYhDr13i14squOah4j+p+B6GppRyXaEM3byvwMftE3HXlY/9zsq\nTuHUG6Uc0E5IY2m4ogwTJdonHMn3DTynLmAdnYIJjAdGwxpKty0PaiDIpUqt\nGCpLg6p8oz/6Keq++76wyh7CJueVY7fG3nD5n57EVksU0vg5CUcfBMskkBv0\n8fDDMiyblbc8PCTfkkvthCMUw5berWJFVlBOxWVSpBYUDzewzW+6eNpdW4pX\n+2wFwL6tYOhdUcra0gB4EnqQ1Xz70SD+53np/JfUMPGZSCLLK2n/reLUmkKV\nu2JyOksL68wb24BrGcd5cnBTh6mM+9zPwv4gdF9o6IFKTt4tIvc97QTTwhWS\npnL1AXiqL6v7jmMwoRSR8pNMQr/2KsEuDOQoto86dUURiKolDgZzWRR090Xl\ngIXa6QARsABgpIMnapJnDCBBvwKX2zRwl9CAb1HWJlOpNywcgM4G+GX7Mhxl\n/ab5QCacfat0Qzn5Pz9VigW3GoMlwtCWh5JGmOVPlLnf/OWDz0qayOFZEQcR\n2n1vz+8SHHX5rIlMSLiLAIP2AhQsVsTz/AW8YFMpWJF9ABghPDvKpZByxW9w\nlFhw\r\n=j69z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEZkXMIEuOeR9ElU3jjNlUlMNQMCU+9t7Kf/AWZqpvGAIhAMCb71mHkieteb/NorW/MHWLAkuxo7MbDHVlfSRlORUP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.9576dcd9.0_1629927866827_0.30124673950411784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.7531cf97.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-button":"0.23.0-canary.7531cf97.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aq/ar+QaVa/DiGGmP/OVlG3oYXYLKZSxHHpAFxM5+2bqBFmSMT6d6U2R3fNIPC3dlzscOBTgW096IUhjqwpm1g==","shasum":"5b9a8c8bd0ae6b163d6b760dc8561a9d0b429f34","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.7531cf97.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87RCRA9TVsSAnZWagAA4fcP/j6K47Jh6mLYoeRERibv\nnTPZdw6II0FEHhiVvM4IgCZsFmAgKN3ddUA5kv79cTfH6do8zdT8CZAS6FLw\nJzbq4E1sWvOtg/6wbwFNGm7PLTDowFlHlXsKmqGjU9+YC3ZU7K0MtwSmBvDP\nD30S7lGmbjoSv/RGGsR893+sQES0nk5MohXdRr1L1Q9nkss8cVYe0EKahCno\niJegZuyagPKnl7//TQUCkLr/xD+s0TqDGev9ujwRqQSuFDpd2WMeL7lxrTad\ngzV8myOceYk8jcG7WgKnSeRlMqviK3sqBG6YEX9rvMHGy+6s37M7B6psAAj4\nMn3DjwLeknh/nzPH20pdzqWQOHUOSEBtaJJbT3Bn1i0DeTa1rXl7JzVX/IYN\nakAnybMjBYXDCIT9ZP2FiYClC4iFpdNuAZXJC6+jp/hfBn5VPZQbMRmY62fJ\nsSNDMl/c3l8T3Dw4U3xRb08MsDkPxPHoznNhdr/kAJYEKhOMrjEXuy1aa0D0\nzkG0hdWIuNoYPBG9LLYhTw4PdFRYYU6xmLrBuaHkE1/Dv4DvPa6KSkvjC1+M\ngsu+wPj9soI7b1rF4lLr+8tGp1VL+buUMttIxUgVNGqoU5AZtg+y9qRhfvHd\nrOvI+tuT8gmhNcKNPO78A5vT1c7LwlibTrgkMnIhHbPgFVsXG7YloWdFuXRo\nQG+/\r\n=IVqs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO1XFaFrPRShlg06q63d74SvenQUYmGjTagas4swh2iQIgOT6w3eh7lbqcqxYJHFrB3UON8jWQlFMH4p+c/TBjhxM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.7531cf97.0_1629998801512_0.08904010681220775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.3bab26b4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-button":"0.23.0-canary.3bab26b4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZKoVanlU5Tm/QbOXzy9DrsukbeL5afYL3ZPbHqzAmQCqQO2pEOA6ejZu2Ja8zWU87c6bRBydceeanF9IIVjJ4A==","shasum":"4f41fed839d10338b5b130a08131b39519700f5c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.3bab26b4.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtwCRA9TVsSAnZWagAA6ucP/AqyP8h0hLdMFuQF15x/\n+lqytS7SzN0MJO3ZwhEnqh9ah6d+hPMRg5XxLOIkNYbqm7jrEcdR9VEK7P6h\n3bGJuluSwFih6QNQMEFpY1KSiltbHW6fK4jD4UYFfTtUI34aiSr/tqz/eDrL\n5NOkJYyPtx5Vxv4e9H3VFYSeCGn1ha9X7cQHN80pHkYv3aqICERtneXMWfxy\nWcVz+2NNXnW4qhyndKTv4BTM8fqq6hA4ozk9evoYhe64nWjdEaIHV8yUMNHV\nqsICdrMgJQnuW3WVJkWas9Zy4Yeh203/b3nsowO8OhQZSRCJeKjL5/m9pUD4\nKMSXkcWJRe2EOfRGZQO3JI71ydUuyZNlWxm/I0KBaiqA66f5pg5/4CfDbBmI\nKPYQ77MfhQia4l2Ht8cD1tj+LO7CvkyViCcfep35X4M9dC+wLWuodL37Y1HC\nHxfC9Sayg4jfWnwyjZ1n1IhZZsk1JVeCxXZ16tHKmZFLnSPtVBrgSGbT1+li\ne7sABLnoZsQFSa8KjaJusNBLtLR28Oh/Wn24WsTC5dYJwzJOED58tLYq9KdS\nz5tgcktaDBUDS9xquwoTu+CkkBYFQgS5qDITMw9ycXiROxmmVkxPg4weDjhW\nzSOS+mftmyoOw8kFDjo07AfrP/nZ2jzXbBNs6RqcTwUSnzCrXVY/UozwrIwJ\niC81\r\n=wM6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwIOgCgf/f+v/zBRT1j35WVG1jvX/LhafH+d3nGnFDcwIhANTXidu8QyNQuptLTWtllCIco/f8GabfVJN2FNxyQb4y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.3bab26b4.0_1630014320366_0.35481443078072994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.fab48bee.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-button":"0.23.0-canary.fab48bee.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4rp5vmcP+qzzZgRYu3GbY+PmbN3fCmNRAtwQKpJnGM9JF7cWxScKTvGYaok7WuLlmaZilA5GFUad7+kv2jxZOA==","shasum":"c0096e11c4c4af7b58ea6c248e5c4e428407ea89","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.fab48bee.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDNCRA9TVsSAnZWagAA8QwP/0GyXxpTs5uphTDVHdM5\n/Obb4FQkUQkS2AE9WhDZdxXZ1EXapWU4IQzfilAIa5LBvLJ4VfCoYMinfA3F\nB9bVrf5eqfxkaxDHkHcoKfYUjQPZ8JfHXisDXAah1kbf6NVMvlqBi8hfhXyd\nGH6XzZoH/X43nv3Xf1u0t6hwmKPu2Bn1NpJFoBO9V9oBUZBdOyLrRyNk0xfs\nltfcQH7Esfvg1I0ripejA1BALRlMwBZOgHHYIvPx6Z5249v18cLUjqqUkX0Q\n6yi7R/t0pslyVv4HlvWIGNwbyqgd2qoMKOEtNXBRpgS5vMY3zfwWlbWBC+lr\nWIDlSlREj8NhRXcd1I6vJejInpURyXZdJZUqiqspbZ5bWON0y+FMMPvMLDZ2\nvHXOGE/6dYzw31EppGJYe2b7lVynxQVPDTkEnDh75ZbCayl/5HHIwDvzU3ez\nWpgQTCUii4M1+5UA0C3i9hnE4vDaN1cYpbc7BUsyCm5Q/sDc9dnIMrG5ICAi\nUfFc2abgds4rqxP9YJ0UXVolDHPAUQwFyOnGuiBVFcUf9tu2Olvc0/NFfeyO\nXqO5qQi8XHln3xN9XTkIJdWdFsTVnpzhnVwYAnoQmWs06d+YXFt1z3U+8PsM\ng7+rKGNR5CSUefK7LmYdtuPXgRbBl5ITiwiOPxE4DpR/WoRBQ6rKPW+iOgIu\n5R8u\r\n=eScl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfQGh9krFsLmIjG6NBupIfivsUPaTKk8cuKXAVB1MPLAiBBSUYUbzzvjNmcGEG7qcSJDQjt5vwBNbN2KLieFlf3dg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.fab48bee.0_1630015693000_0.37180936844880597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.dec18df7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-button":"0.23.0-canary.dec18df7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vQgsfzOQRUQxmQ53n6FejXRvgqzQoCNbXY2GCVbmghxbncvbGKyJSyCc8w2gtT2vrRDpxqiBy/qYe+T3bFmBaw==","shasum":"fe65b508b107b019ce7c72ea5604af5b6d682f1b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.dec18df7.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJboCRA9TVsSAnZWagAAzikQAJJcpK9aLq82Wl7L3+dW\ntM9HcTtrQci6VfxxVSi9yyuuCyt7dOHFFmg6NkqdtorEiGSdYHXo2cCbqinz\nUisvd31g7N3uGnrbUephgZ96vcKBzkjWIWUhAlhRgOqXJIify5kyzmbbh2HQ\niVG5Guq/e1soP5CA0RMEsb0wZsj9dg1TuoIJAi8ohsDRyElHytlIL+k8hkQc\n2OYBV/og/03pUsp0ktUYvglgckDDST/ZiAVbAXcAEvPWrjLW6BfMn46iwf37\ndg8UAYTxMXTfIvH76W+w75yaVxWLLp/hNY7oqMAkwQJWiPaYddxD/xcbPQAj\nvjV3V0xef6ouCSAmbUNgDKszm1vUGxI3eYEi2Apa02vmYTY0UHNpCOgRtU46\nu/bS+gcEv0fSOr4tDWuKgK/5nSundyo/Vru6uIE2C5BuEsNAhlh1ZqQrDxEh\n8Q6QpNMudIvQ8k3WI2JJQx0FgCBVkPmp8ZntFwI2mdVVDlDjeJjtTbNH+9Be\nkVkW8wPUMb9u/3Ap7OU+Dtx45w0AazIItdcFbYSH8cusO/bHf43hNDrpyHJB\nwhHqDY6nvynD2Ys0YM6uf9nTBxovzttfDR5QqDAS7/zINUNQRugjiogcMc2J\nL/lKlQkMN++F8isLKIJiVcYzmEwyCwWkQd10A3vYAExTbFAUyrzrPiCG5mo8\n5XvV\r\n=XIY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSY1/fCMxd/OrnKwptslHgbV3F0N1E9d0X49wNlyYjDQIgGI5gy9rzmol9gLUAJmuPiStGyQ93W7LLs9Zgrrt5MZA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.dec18df7.0_1630312168720_0.95650833193507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.61fe5b17.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-button":"0.23.0-canary.61fe5b17.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cBejP2qcf97dSo7hGiw0jBLU6wA/nxG25EKTUwHrkg6YampMZSsk5zcQ0vEnrvXCoETqBoWNF5l8Uq1ht+xHlQ==","shasum":"00ac93c77cf3517a625ac79e903cc6dd3db23fdd","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.61fe5b17.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGKCRA9TVsSAnZWagAAhAUP/ivJ73vnSvw+NStq82Rd\nLNlomFiENRwVkSnsUlNC4SGl3PSpJfBUnTEC66fQt80dZb3UTBdEIqLKdhve\n47Uo6G52evzSFGadrzh+ocWWKFl1lS+wVyZStIslTVXxkUiOj+B/ww7Qj3dr\nWpZLXZAxQnzeijGSspfssAyk2DgkDpNEta+LwM2QeWJcW3NUWZOFmacJX9Yj\nIh2+kwdSldTRi8hwzwfh7lxClGZeNXnej6tWpBuPywMPHN8k+ZROb9WVNPw+\ntNz9EPkJuI6xWLaqfiXZpHi7zWXAW3kcTXCu+OCAs+QM3rUU2sMea9/6y4ts\nExRwtrZ549FuDYF7UyyO5yx5m9Mog0OdF5nxZjynzSzLPbI5dqhRLFnX8K+N\nNyl0WAQT/l/1ssoQKus4zua/MJ8LoEj2Qwt3KF9x+owpSOCWTXIg+gCyoUFJ\nihzD5nbMklwAFb+Tb5/TVsMfYEECFyj7wg+QH0N/MPPoHY5YPg06LaDdsOoJ\nT6aDRb1gjmXU2kzcODsFgx1kDo91Ui6uCVDVKqSKiCTTOLuJxNUE5c08CX4v\nRNdKdt3dFUP46pavzrI2rJYLIcjfrmDXWcibhZlWQuDYVC7CDgIzprPpWLH3\ncJxzdOoltlbL1TM3N6rsxfS+MXk7fMv69WlQbprXf09oAlyUVCiXySAxvrfW\n0Ewk\r\n=V7/A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK7fcKpe0P+IC53usv3n7y4dfKwiVi+6hkW5qQlLcWGQIhAMH7sTi7x+Rz8zTEtJPBxifYmaTUltumsFVLw5OvFrUG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.61fe5b17.0_1630351754401_0.888960175072993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.a8c31f54.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-button":"0.23.0-canary.a8c31f54.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yK1ZgVG4f+DPixXJJtMN0pxX3D6+VAEAL7kIGRAdre1mPIO3cTe7PRC1GlcAXDmj56H9qN3MZyStgKZlPOtY+w==","shasum":"1f778daccd89a970f0ec92ce102f923048c40f1c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.a8c31f54.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUBECRA9TVsSAnZWagAAh14QAJVJqpYCgtCCBZzHnTYF\nxK2S/WW89cR/IIWsTP+ZAiK25ys2uGBPLMfHDwXOOQGlFzek+IYL8zn3EiF3\n2a+dIBHHMkRpv/v0JBkSRNsLSMVNWc+YK26ZfWGilQMOQ2lr/j14yN57Rp7n\nlz/NkpqrgNuuqewfg+iHkPnU50xxYJHpW07TfcFLd7cEoI+RpXtIiJ+IAVl4\nDsJjSGpuN15KkrF2EcR2tjLtRYz/NOlSlqeK9Iz3H+d7bXnzmCQ6EST4pJTL\nn3A4mTlYrUUvT9fWnYZFQpkFfWogDltHOICd/L9t8FJJcJwRc3TGNLEj31kN\nbAu8asl6xiK2lTVMFaVTJHjT0qbNLEhBAedxtQqsVnl+j3wmcUOfqWactNoD\nmv3z7oL4TmRLMSm8PADGCMsHphmjipqEfwyjV7+88qtrf7YqjbtDalrcQW3K\niIXgwTfVthH1QQ+d7FZqBS6JLzWUeh0NiYx9p2Idk/yCbN/wKrjgIhVNFRtl\nMzfGnBy8oRuIpYhVWcbca5AJJATboLpjj0JoenUDtJYRDuN6JvJNZt79+/MA\nxvcdkqigFaF85UV/tfX9o73X0urxLO9b5QFNdGONCr+m0K8RZN/00SZ+fRUS\nerNS3Q5dlTJuRRsfGNBG+EZOulqNwbFgyXH+l3z/MrBai2ji04EIUtup05C/\nY44J\r\n=qV2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVmjJ1WUbksBbpCmSANKFq3Dj9U+YD4JBQ9m+BgAs2SAIhALmYVMFhEDgnOGUUciCF9JTwhcnTfJG/J7SD9WaV2Ude"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.a8c31f54.0_1630355523974_0.672821534962359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.a096dba8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-button":"0.23.0-canary.a096dba8.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mYYm613i7mEelVefDOk1QlXw09fIiExqc5miF0Xq/Z19cC9UFmn+ZpfWrLJwDSgyNCixTIwDuICQSjpLPFvqBw==","shasum":"380251251fee9f79af3f54281c405755ec49f04a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.a096dba8.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrwCRA9TVsSAnZWagAA7CwP/jlSj9kztsFQgmHWT6tA\noHRji28iRNDPO8XXLfdg82x4KgA+ISE9V2v7bgPC4KivEMqFanps+2hIH0hp\ncjbWbRs4aTCCiUx8yY2BY47yRZ7Zt5ZVtr9o1y1Z/LnKc74EF7TP6da4RzXR\nmj1THYuHUamINFqYnE1rt+BwsHxxvxz7rzmQdwiwnXkVHHlHommghhpdyh1n\nJvpIw8WkTnnxKIt3vQck7WjI5gNI5gRsp94/GMnVlymRCVzk2nVnYiqvRaVx\nAZVQ1S7y3MSyr2IyxvcyTAPw+leGLGSMVVVbnmVNSKRBIvL0opFXt09LNPDP\nGlSS4BrS7Hghhc6c1sWCHyxIaKPW5+wi8RUTkw3SnUTRowMTgxM0CyxKLNUP\nYz1XIDWbxqTiffjQa9ngJAdiFUj+WYCZr6xVTcCYm+UP93vViwTtMqOBntez\nMtlswSgcNP8wgBCtTHdmF+SrfjoJo9/Aqei3CS+l3pblI6jZkBGU8PCO8rQf\nsOckFZJjLwmNshewFSjMMokF9v/Xdg0zwUNj2ro1MMQ5FzpVuWKDD01V/uHn\nSCfZ5nkem28SMiNCGoqLeoYP/n2420EVG1R6hmsvGs27FV6XpQWANKd8reQF\nIaVACRpQ4FTWhqCXPkrrAH/9k3FilFfAEa497gP5Gu5ot2qGGYalCRejQULS\nCFHR\r\n=KmlS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxNHiZ5ZWtkqBDakTN6/NrBFV8bCAT0e2CIvXfczyI5AiBvKBhULOGJXIeNydGUuI1B4Uo81KkmB+SgvGcBpPhWxw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.a096dba8.0_1630448368389_0.8039323247346122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.7ec04d47.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-button":"0.23.0-canary.7ec04d47.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eLrygGPrBkrjcxcxytuza6cp1AIhVTvv/+8CHJL178bg6mxPkQ56tNbSpHofIaoSRlIw18Nf3A4A/I8lDt2myg==","shasum":"151bedfec2c86bd6c1d84271adae678e546f0bd3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.7ec04d47.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2ECRA9TVsSAnZWagAA0NIP/RblITiU+eyYEMqL3PKA\nZvYxnZfIOF7NbL+Yy7MGPIb1l34cZ3OjzSrdH5lsTyNB9p90Q02LdyoxWOz4\ncnSk8pESmaaVWCFotZL80heu7Eu3pVJ/tsllrj+kcFv3B1sgzsycCRQnFgOL\n0tdvfH5MTKOQ+nfeWHCLd5DRjdu1CmyKrjFtKJaUM/SV5kT85ZAxO85281FG\nz7B0MiWllMonIrIuyAC1uhCyCxwmBK78YWX44RJ7URgtlJHAiAddDa78paFS\niZMf3ma6s4NzAt1EtoRy5JnR5Sh7bW5Atst4032ItDpanL9BUvSBk+l7t3r9\nyOAdow6/UZvU1PrrnHOAd9sUZHmLjaRIyxQy/GE+RPCDGyISLlAJxCX7YT4m\nKREXBvbAWAFjVYI2t4XLX0cY52U/FX3C2xj8YLfV+ACPbVFR2iWNTMsDM5LR\nv0M8atgCU5YbKbP1cZgy5aOliUEI5yh98uLERM8lsUYLGgb1ue6XzMBUjBB/\nlOfrhl3b2gSNW3GOZXia2S2hdY+MaX3+ivbjdz6W4ma3pd4z1ENDJFZ2Vli7\nlLzUfeLdjuN8DPtKkwYzsT+FRjSvQgLOw3Sh7E/urz/hNx4tsZB9tN1q7HYd\nSBRWbHVdEoiu1krU71JWeLjIE79luOazlDKILXSq7xO11x/0hFCWEhtSGdrc\ndRPS\r\n=8pUe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6RYThwOZYD8wgUBsYjen2IH1UW7ik1DUXdbVbxrsYEAiEApglm5bFRaDLRm0D0zYLuSfxOygGkAHKOKRsU8n5wygs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.7ec04d47.0_1630625156143_0.8029337130483472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.d00b098d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-button":"0.23.0-canary.d00b098d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bonBmQ023CJJf9ab5ayLB4LyPjhbq4apjU4ObQH1lL+odC51spZh6xnhomS3CHpIuFlRmvq5HD4ikbNyyUSqLQ==","shasum":"16a2e4f5a27e0025f248d861065f660ec9f247b3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.d00b098d.0.tgz","fileCount":15,"unpackedSize":109401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMuCRA9TVsSAnZWagAAGpMP/jXuuFD5cXu9NSSyfKax\nQCYHe9IjCr5QtpI6YIJohI9IMU0ErXosOV9NDGIiWFZFjo3BUGIfdnc+FCyi\nhGl/ndR29yuEj/Q6q6W3pH1k/7GL7JZ4HxtdOlA1kU6qe3URXMNOp5Kuvlua\nvL9JK2GA+WOG2ORFWcFL4JfvqQoZXbWBdf3t1X/gfM7RbsW4jqdO379EgqD7\nVaUglCpHmQJyd9S0uFNQ52rB61QH8MFt3XvPuGMMSqbuP/tPBMcWgK8rIr3D\nqHCzgCprE2xOUs/PCHI7ELbZdV5DHm5bRPBhW/IrRPZFRw7aYv65E5/2NTu3\nxc0v/COTjGC2nFwHcyiZKa7CvNpf299ZkJAsALQi5MgYnxtzQoqMsgcoiPvk\nCpp/18E3Krxp20L+2sQN4Ftutr3UMLuK3Im3EIu9tk1kYqyHN4bUHI33H79E\nlXtBg36rrYkgQWyXOHLsBLQY2Gv2G/7qwcxb36UJ9I+XrAkoWaZP8MYtW/Ea\nEOH8qXthesYW5U844PWQ5cJ2ojq9nSFxrzsDRO5t1189v1CWJtAyB9G1XlCJ\nbFoGyqRLXhXH5+P8O4gaCsJClJOT/q8k7yq8F84vNrkGsHK20F+ccxFdZp7D\nLTBw1EwyZSr1i9Ke/3GeaQXVADmUUgbQDf/pjmd2l74GitOTiOmRygUCCeVR\n4R21\r\n=Ekbb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6ihzBJY+WuE6lL00P1l9BVmkZDu6PvJj/CyhFDfR8kAiEAipjs93vo2aMqBolBbRpyKbNYflLyQ+fEQ8G9+WMU3ng="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.d00b098d.0_1630704430279_0.3529921415851751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.f29b3352.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-button":"0.23.0-canary.f29b3352.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kdIS0hlDCkuH5888Hw02Ly1SzeVfdGxUxelVxynSdIpRU7J2xOanfXLpKXkkj47coIjbb60mhdZKNL/dxZofLA==","shasum":"abb7debf1022e2d38ce0098317c7cd4eeaba3d19","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.f29b3352.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yHCRA9TVsSAnZWagAA9UIP/iwZY2EhYzSkPPFVFT//\nDI5Q8ilLNSJk+3/r8suLiHa8zeEm18HrG+NAiGyVH16NpgTdvhxAmsV1Zdzv\nPLgPn9Wr0VAr4orCCCOcteITMTya7gtRkaXhOFsQPPRvorgDB7rTLkAkPjnS\nrFdgL0eccX7P/e4/LZqX4IXlOP/6+Swgj6IN1EuyDko6hq3VDfCuPont+noa\n3W5lwfChs9L9hPSHoiDvjjSfv8ixx6bukQXIraXm6PKpA4/b3WAPY/Y3de/k\nSNKGUMEcXYH7mWNtnUks3Gp/UC2j+ER/yK+VJ1KMj+o35yjrvJf5vV+Lit58\nbna5p3e2MfyBfxhw59CpZ/YGlkZFxTzvrvY+ZZImE4pvhqfH0VU/kqTsxgAM\nfrH8w1yTHA/XsHa/yZdIfHK85jcGg+ip6biCedhVm6RkDPVevi9M2X4X0eg4\n7/WOZYnOIXqbAGgKd1WVhqve8vVqSGoLBGaxIwBp2x5I8U/FkfxLJTIVVIW5\nNtdiL9AlaBNbZdZ78eYYnlEXPq4oN9kZpPjpGR7rRawxSFrZGKNd3LrdD1/A\nnTmF+dcy+ICj0TtEXbq4YK+YoKGlqoZqqWA3scJu8ax21zfkyXKUuOQhMZXq\nvSSH1TZHujlyQL1z/bowgk4af3z3/0Zk/Xuq8plKjcfA/EGAZG+vc8FbBN/O\nzAfm\r\n=u2Ch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0lWeArElKxnbnTi4xgkQVtkrxUg191japV3vZZzJRBAiB1BN1i2IG7tCyc6O8iUr4Do7yXpLnQ6SCqVHftXplmew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.f29b3352.0_1631038599283_0.0471789600774104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.4962a163.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-button":"0.23.0-canary.4962a163.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-phG2+/TEPxjIauDO13lyzgTgAf7ClqN8jnjhjSsfGUb2JsZpFxNzcp4UfXvl5B/gG8ms4+0+M+Xc042QpRy0Jg==","shasum":"2d2eb336795f4879539ada1cfd59d1d3d466f84c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.4962a163.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uQCRA9TVsSAnZWagAAK2MQAKIedqU7ZP/OV3r8txck\nMLre6tKtBoLfyqP54Rhm/fOmIjevud86OUFloQkv4lvbwSLVT4WFnxyHmcON\nN4BxteXTGp2IIzQg9o0VXtQ28W08aSpurMJuxs+v76fNf87NuD8vlPugDzH6\nvMDXj0LGvYTNYVRXAoRw3TNP0FLLKW0tj/NWtLzfOnjMLnOZFCTgseACC2Oy\nuyA371nfEyo2f2MQ2v4f9cFsjj/UFANyDuQqFWkEiwpe4Oo0mY7qBYX7YJFW\nC0hrc2mZ+SGgjYDWnSE8meKXO2XFJvFCgT4El3ISyHtYpq06HzwKjI8VXfEB\n9mh7q3UA3ogwzt7GLzpcVkmjJuCxftnZNBselrhYLKoNhiSKSWzFwsuhz0Hg\nd1zkCRhiiPGrdwIj8JPBnpT4E7wl6GErlLRnWsOHKy0hOdE9OB4n499n2tEA\nQhve6z/8YRg7W+myA8qNQ78bW+50gPLIVXzErbj+8CPHXdlWlcWiyw5bZVa3\nwlDxmHjY6YAuXZCN6PJc3B7MuEsCUp2fRCtZZzaWyC0G1y0JATlD7ZEigp6t\nOMoMriURqBeSukw0mway/WXZbMRx7MEDHgCfi9Kv+Z0PmLBCLrVcvf4robsi\nmSg1yuG3jAuDGVBcjO4SnJTPzaHHGiqJOHs9IlFtYf9gWjZDYxr9yZMTGtI1\nWSrW\r\n=De9W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS7VN9Xke4Pn9oD5Svw3w2ihKgIvxk8nG+38yFjtbtGAIgIxXS/9kGWzJwmEpqKVPKesPP0iRvgfE5duCUQbfub3I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.4962a163.0_1631058832603_0.08972953715690468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.33102bf4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.15981e9d9.0","@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-button":"0.23.0-canary.33102bf4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-US2kt8M6BgqnmvwkHOi/6+BjmbUKUck0B/j0sZDGKi/QjX2KCaWvReSA0AExp9LOdNLiN9LNRkn0/2j0aQHWPg==","shasum":"c05b2f6e24d1f2eeea09da6325b6fcb82b81decc","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.33102bf4.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABNCRA9TVsSAnZWagAAOawP/ApSxD17icDozzhwULs2\nu4Cg+a8aCrb6efJBaLsrG91wVjFK5S+73nqcVrQpHdKZlw4XsUXVmM0sq86q\neOlQRXU7uGUZ7jnn11MArZbhbkXmkQu/FtyjFGACbz9//2wqyEabyC46WBo/\nmwuCjjzfKvfRNIJ75vjuCFrD3r0QFz5sa4sDRK7duCEn5SK6KOXlvwWJga6k\nRAiKRyC0VM65FK/rvCF9g25VkWwQPFdUBVrPrsKbGBq27JKWXtfzXr+vCRpa\nemCjENxX+M2LraZM1HFvjUuEKNrODJdb7DWSR7Kr6RI51KwVSaf05JYxTLP3\nTt0fL5kkM83wmF1KK0X3oeuBlwk4dPE+oEc+fUko19NPvzogTwVX5PyiENkq\nNZDlgsp0XwJPWcbp+0Dg6CVwxe1ny0JGbEPy2pXn+inKZ3V9HYGdVKua4gIn\nnNlI5qEo3IpV4glmchAB0t3AOwHHzP1c0jIxeiCskt7lYF9W6qFoW/G3nYAo\nrr+lW4a1DiGL7em6Jxxdcgw2FxxoDRpvx+DxKE943ksEi46+9+ZtkRE2bwjR\nPbXj94pQ9CiYZNJGngOWQIx6OigK/yCB6I9SnM/NEwXvATcvKMgq7luk27sp\neitXdOdEgq1vAUf/81WHXXpJoxwTFwt+/RgNYfLpZ8HKYyt52mzz/gkJ6Rp/\nYbT2\r\n=1IcO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICoVYcpbRTvg0nc5G7rO4DrDYYak8S3HY/hw8wpy1nT4AiBpQ678CfumnTpn0T9xDhRHDgsor9lfNgIOwrt5JTvr0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.33102bf4.0_1631060045079_0.1860822784219207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.76c68381.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.72464476c.0","@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-button":"0.23.0-canary.76c68381.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.72464476c.0","@material/feature-targeting":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FOYXuk+iY2fFRScKePYfLMgra0RysVn2bLkYPOsNS2s7Yx8I49cyW4QGUtcIbsDOVAYp1f84mE+nnh7n+TLFKA==","shasum":"1b8573449806fc95abfee823f0ad3c44c55c5b0f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.76c68381.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmVCRA9TVsSAnZWagAATaIP/RaQ2Gf4fAdyUn49XTaq\nUxXj50eiuSBVvxjZ+EYyf4mg3JlkrdvLy9aR29HRE6ZQ2y0l99NaViDebFHp\nNDvHL2nVpX8Z+2MUews+UwznxhV9ps52o93M/PICne4mOUpcQOn78Vl4xphl\nE73LyxUoYRfnDTJV5a9JSiokGOcwDNl+6GJuB/xHFVL8Su/KSHf6Ej+AsyyN\nSnWTx6zrv6DwPnkDaH7UIWaNUxeVTAeuo31wcf/ndvHZflQUlxwL/H4H3dyM\ncnzrEifd28yR+3h8dtwQDFHzErX5YTPDzdWzzGz8aWXS4NLkUrFIx3lJ1Orr\nTFr/eqF8YT8HRyZ+40+diXRsWuf43Vhv46MSxv/LUPdXrEaTtbWZAULa6eVN\nkBwmuXlchU7V+sQpICvbNRHvWfgA7kKIO0i4mU35wsJNXdVJXll7YParvs+b\nC/Y19HRN2Yn9zql6uaq2rhHWK/sV9cG7dUk646hNR4jYg30NWoiQyiN4yh7W\nKe8at+HT+rFjR59LfM/HGS/x3C9MrehacXEX9FAQrujp/Zx1c5haxR7/w5Tq\n/hdXjhSduhiEdSDtvhEh3gj8mUwN/c3Vxrto29ccCsfDomPGl98NCaplPYsA\nuMTHPaVS5CIQDEQxt7X0/ITcCrBnugEBCGDa7EFZYX6x2qliTFGOlfsIjH9v\nu8r5\r\n=rCCC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHiWRT+0EPVGvVVpFHckpYKkYeDgNnaVikYWkcIeSsnAiBbP98oxeFZ8baibco3LVYaOGXJaiIjsOpw4/9bSd0gYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.76c68381.0_1631132053253_0.4143414919970949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.17d51f76.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.72464476c.0","@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-button":"0.23.0-canary.17d51f76.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.72464476c.0","@material/feature-targeting":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0Q8Ka8JcwTEdOivegqooClUbDAz+ogAGWgOGOLPlvfXgQTr5IhMLqdQVl7sT/AJ4c9ko5kFmpomTqvtZA0QNQQ==","shasum":"70bac94dc991b94f19e5620c48dfdd1215a7ab0d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.17d51f76.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUa5CRA9TVsSAnZWagAAlsQP/ixMsQU+rGVhyEZRTk6x\nX2E3BvkpL0J6GOU9To1GGX7viWQ/GgbppygFCfVivM7xiDTuwtuDbZmYoFDl\nP0+DjNy7s1jmw4fz+hzEoEW37JumJ48qoq8DlXqRB5ZvHNeSp+SfE1YLDgWU\nOKGuH0GfJzqOLw3W5qLigpX8qp7e/J7xYRtVrd4et/RYmChN+5Zccf2vwtsp\nY9SMqIVX2YadHG7Cq8aTzPNBGYjSXmBNv8zc29BzGzvPeTXvbV+O8xch0S11\n3UB8YTXwWfe4Fi0y3Esyk58xFQuPnDyL+AmE6CSLUeM7CDtcwQjTGbhZCmQf\nrqnpbw9yZL4Klb/SW/O5qGo9TC2+xAUcfmyldvIhYwl56u3pNB7aJJqgmotl\nKezPQ2M2KyZt9Zy/izVYVOBeAxCZvnI+mMNIKxAXKV6S4x1QbNoBRn+E4jzh\nTjjZpmqgigdgZ4ycmuirrAtl74jqeI7No5pUTgjjSruCU70+HhoJPk2c1AB6\nwJDQPsmys1AUNc3VXWaVA9t26iPUqQFiu2EHMx9t4r6Dmwk8b45NX43A2vEI\ndgVi66DVV/7bdhDwkdhuOalZmhyoTz9rCmPu631nWyqo5KzRhVFALG3LxJ3S\n77ELwcLAS+E7FHLHvWbget+XtNG1HlDmqj5UADNuABLqWOrTCeVqDKE3i54Q\nY+IT\r\n=Ma9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1sk+Qj2YpbI/ewwb/ciyfa/Ts2Veve7UmpUrIYYbanAiEA7BY3s4dTVFlxz2LMovpuEZDE9jv/wCw8u7g8YOQqPAM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.17d51f76.0_1631143608902_0.8721440953639485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-button":"0.23.0-canary.3fae6c2d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZzpJ3jIyzIsq1K/ay4+QHBGNsniZEnzQlNqMdRSYkRiEeXyKe4xOQDLR5KUBOMShtBCw+X5hoXXYKbMAZRNehA==","shasum":"5e37f8b4ed9ed893cd40a0976f880918f485297e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.3fae6c2d.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6T1CRA9TVsSAnZWagAAZuwQAIDmgnmmTZYM/J+cTjld\nW6goXL5ul9qrTi9/qZ+VmXrXxrZD8cjqU2Ew+fEuW76r90Cc86BgAOtEBOwc\nfun2oD71VCS2hawKr0+P2Iz9ls8QMIn5LuUPgBScfQ32FQJksyinaH0vnfBS\nBxP2OB0eDODUenzMVP2NG2wkWdIgqjmUknAJbO4LHygPPoV0f2Spzvy/YWHm\nqvZh1M4JejE++MhLhZjlU325LcBLuVYnf/Kq5xkHN329fHAJZ9/e66zBaFtM\nvPgIuC3DRtkmCSAx8XDRY4WwKUPn1FOVzomnUUSjg6EpZhagXzC6dQBguL3O\n/fAhykxo0mYvXY+sJMeumn3AoxTNTlwyQDcZwmW7JTxD1AcDsxO1iWDtrx6f\nBgQFA0sHQLWywLx7DzwI4MK9Cvi+F88b6jbeIw8pOL8O2fqi8EaWz6UJIr6d\nL3EjwOvRGuV7MoraZZ5+3kMginHUhUqKmuYd0Kywt2jiFWYiZ8Ei0mJ99CAb\nYIMca6X/PdpKwrIL/5TCQyKztyItGNmVsbOFsSBQ30JkuwQNTyrgS4vHH3Nr\n03TOl2rq9CJmj+IqzPCslmy7sniDjwbFSq6EhjocbTk35TchC/ao4o3xAPNd\nE2p8p6vjv77cn/316sf4HD64+67z9u1Nsz5S8R3pppo9rbgonQ9b1hGIKcvZ\nP1Yh\r\n=vHGc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0A4zd+swXbqwEm2SyDrSO0d4Mcbrsy8yAVc8BeLUCLAiEAwbpMjiZDoLW0HqLfIqBPnBy9Df60Wh9UtAyrNCsi+zk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.3fae6c2d.0_1631298805600_0.20853551909471957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.f1958c4b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-button":"0.23.0-canary.f1958c4b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2tHbMKPDWOsnzVD6LMzjG/edHMeW10RPKoT+hq/fa8U1ksfNWN2XRnqcd4j/FodmRV9JAOpEp+Xz5LaMXI+LDw==","shasum":"46fd371daae27588257a1764c2936fc4a56b689f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.f1958c4b.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SnCRA9TVsSAnZWagAAhn4P/RyYHCybdpi1/8bLuBBI\nTsidNucTGBipH3vF7MtIgV0F84yaP5Qrv9FQULag0PphO26mZtfPaC+jhv12\nhDwo78I8pblGMdYgwpqbr9llZ6qOP+SCKOSO0uwgTkvTeMxtT20uGXw3J5Ev\nYSecz1NHaiwvsW9gqQ1RGMu2rxzda9mUynLIOia204wQ/XByy34EXxAfKv9W\nJfgSW8oHC814ALOHkeYdWVYtEVBEgcLqsd7Q4wMyPsBllOnB2O/0ABS2LoxC\nckMN2GI/UhnKkJFr0ynnjP5sB/IOlUG690JxZ94KkHTlSTl0ZqBcGjokHBL6\n/XaBJXZwio5R2K+A/1btHxgFrQ1bIS0m1EXZyDXx3VoD0Nev/Rcis9o+MMan\nKGoYsCnE8x32mMozxkOdMfJQcPMIkCuqZsn6NYBDdMWctY1tJLd4WZkjKoHb\nApe/zNS5uDudp6NaF6S3O+9PJjJ3rxrAUYSyBbDSaSK/mLUdBCKEz0gG4UVr\nXj/vObOePscsTrnrlKs01aTwIX/Hdu3e6nalIBupRX3/IiZqUqIvokmJVgpo\nhB+P/XNxBliVwUOOHXjcTNDOEvYoS37kSSefURonL35FfG66NCT0Dx+EKiEu\nscZDseHsGqJ8Mg6c6ZdtN9igFer5uEoQVtnBAdIQHUlnzLh/XDRCUcWLQPQz\n+mhZ\r\n=e2NV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1xArwiE4iayVOBwX+ITTrGdCswbEhJ0Qb4W7ztd8/DAiEA7LtGWb6i+HyGScalpx/nrKzbCfbm9UqLJf02QybO9gU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.f1958c4b.0_1631560871653_0.33450200551101616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-dialog","version":"0.23.0-canary.78abbd59.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-button":"0.23.0-canary.78abbd59.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eo6f/dbZOBqWrUT+90Z6x1i24zOs6ciJvtsbUDMHSzY7iL1oAyhPYR5BgBnccvdYiBTD2d2gFAxxFrHN/Y9Iiw==","shasum":"1ce69804190b2f6525a15ec4680975d1a4cf4f60","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0-canary.78abbd59.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IZCRA9TVsSAnZWagAAz5YP/2GkZnONhVszWlZqbAuE\n0ZmKtML0zJUNlimcTLaT06cTBVNlRTXb/M1KzC/eVUCpL2CsYTNLvtZB+h0p\npBnpTQkdNwp5UdBEneDraat6ghdaZeSMioQB9sYNOzPnKGdzq1bw+X1gYOi9\n9AorEuA0N2K41chGYah7ALx+VHJSWzpmxVhj3Q7iQQHRe0cNCzOVFqcg1YT1\n0PC70XcYEiW+aiIbR0WqLU7b5HqesIkDsrsUNASGghv9rcHPk2QCYNyQaKhg\nWMo5o79AyNrz4Uh0sGxOsC0uuj1gnnQPbgdCxAzya0grTMCkQ4pPE7zN9b1q\nS9HN7t6ccw3Vl9hP6n175/TscqDUBLYz1i5PJNhBe+e48NQmT5XkdKtEe2ES\n9E4ALPj019AEOpHMzngtYKiVLdSX2ydvTJyWe3xrNLThgtsOtBP2Gxp5hakh\nrayaQySfDe41tjNyRfXKQPYXk6M78DYyDLKrfVBYqPkULsNu7yWXvdO7RWrO\nVVW9sKaB6C/DxM5cp1C4suVJAKYnwSgwP19rgPsZV3NsuD3emUlkLeXLiKYz\nBz0rPd2m3Hb2mYWiNWzZHbyQR6vDNtmbP4CCdUgGa8fguQY6SmZ6AfxS3Rc8\nfzyizACU5W21u8C+L/BqnV3VinQy89o6p/0ZU+jKyaPs29MoAFJmLJXUjW+O\nMP5j\r\n=mFj2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7cIWHxkF7HXMQRunlF8GZklBAm/0TJibUXnppgpXC+QIgMWnG7i63tPnLiWDNUjYGAjROgyVZ0WhgFAgeYRGQpz0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0-canary.78abbd59.0_1631568409659_0.1125211091885141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-dialog","version":"0.23.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-button":"^0.23.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-r6fJH18UmtiJ0Ui0ktsxuG0vZv7qT+Fos9AiYraNFMzJlaOqB8LUknQN3AfGa/8ER0X0LuyC3XEtgJPTX87k4w==","shasum":"f450b10d0037fc2a93416e96953034182e7d08a2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.23.0.tgz","fileCount":18,"unpackedSize":137033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q6CRA9TVsSAnZWagAAVGEP/RMOL9+mev9uMSq8xibZ\nslWiYCv1zam9xFJHPm0oPlZ2WYa397C0v/qXf/U+lR7vxn4qa/yAs69Z8ks8\ntGZDSGtAQj2Jd32nEJqfmOtE7XwtUMon4xI26s3EaBjD4U2DtkqC7s/CVSNc\nSvmQhUnQoNumLMd1ASVGjpqCJMVX/nttIH7ma7vs3tN9dOiTvGwF1vTcH5ip\n3Fwccj26y0Dy9vF5L3TnCKeodOVMSiRFy8/kjsCBYwQklAQ6WHSjsq24cktK\nMJdc9hWsxBhiwhC4b66QeZZT0+3v13Km7VJbcQyov0igfxUHp8y8J/kDmFe1\nSVDzH0ZpVS66zMs/fblgVl2xrSG1/gnRUpKNqIS92PDsOXvExLilMwXfmPov\nNG97sW1Ppi0uYoy16rFR6UNJ2KvgAeICM6AbkRBVkAbmJvx8YTXxHusikhNw\n654bixLjToGFO44+37iwVCNMTCkLYeB8YlA9N0eOkkoMaeixaon+rP0iIe0g\npxYEj8kTGGVUMRo3N2YRWeOB0SAWgYoJE8GPtq55VMaTokeWOH2hatABfoPr\nBj9sPcd5m0rW3VuOqzT+3QdFmD06/OmkdLoNAEKXz61y710nKexMmw2ZWvX7\nENn1llpjVYaJ+X8Zj3XNbflZIe7yC7mMKCzKPRymva1fYtb3DyOEVh15lCdZ\nBvhC\r\n=cijU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzdFm/2mrn3JXEpmlLN7mbM3f4OPWR9+5+FLHNUPF+5AiEA4UtlK/70Df08ZDWhhKevCSV8c+XQkK3V4XEKrtRwOxw="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.23.0_1631568953941_0.3143493541268896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.9830d665.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-button":"0.24.0-canary.9830d665.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/7uTz8gNq2zeToWIl5gImrW6S2d4nUTH6e9q31nOVX7k1UjMmSZG6sb3ha4urF8LwL/tAEUesKu0dd8dl/1ixw==","shasum":"999bfa9844bdc43613323005c6a8195a848c62bb","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.9830d665.0.tgz","fileCount":15,"unpackedSize":109500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SfCRA9TVsSAnZWagAAbR8P/Agqb19WCYX5ae7riHh6\nwWIsnZbCFL2K0N1aW0Guew9U+APfg9VnqEIxE11e5yIwFQkn4NeScNnb8DdA\nsCKyVWOfw/Gtw4raesfGNvF6eZL2yQGKMz8P2TfGrWFGXfsHxcbvWUXrZVA9\ntkQxYA/FfJplsdr/fEbNYfWCXo9EH8+7RA1Fr54ozGbifKeT26/YecKLJ1XG\n/bD5x4ZA5N+uFG/KfLwQ33i/EWMlr8/z+BSid/NS4Nqjdf9wFxo3Yl3ZlZXj\nt1L02TG804IX7gHxl52O1QkPIiY2SgWgb1dhKJ0CEdTIgx2aJJu/PJ7jenEK\nkjb5oqng5PfjoDiN1VoXeST5AjwTpVjkUg+XdfGIcVvcDQwOiSvdD4wYIbGp\n26vDakCuXYLEyitZOlY+5QErFByKMHv+H1xWPdrpZoPSQ4DE9JUjsrdWNB53\n+C52wU8k1ANNRwO2G1d9TBEnjZORmrUp//BwNgleXrIHJBqMYozVX3qAGWa/\ngWInGtQE4+3CT+/vXXPT1/5lzg9JIAoZQmvQ3Meyz713eRRWOne2rsnw7zU8\nbxRft84xFhENTmenoyWzc2xHxHzotDd+77DwJLBvq3peyQt38ujID/EPfMYu\njdLo0lrU4HayKlFUYB2N7TUVyOUveXf5EIoDT+2rNrvL7j1hNK0rLUqrTBlE\n5bK/\r\n=nIng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDX0akD6AYgFXHLll7DNuFqrqFxT+pezaPa8L6zl7nL3AiA/e5ZiRF8TjewJe3h7RBJAFKdk++J/2Tb/fJP7NSlRyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.9830d665.0_1631569055558_0.6283061142405997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.20e2081c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-button":"0.24.0-canary.20e2081c.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sHrVQOqCc04l94ZkPSTfHeq/GAl8fz/Lc4bKheJCf1byiEe7z3b8uTtOBqgR5OdYLbFUiwI77RX0uNYawsqi1w==","shasum":"bdd446226ae5541419eb3672b208f5795f6f043f","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.20e2081c.0.tgz","fileCount":15,"unpackedSize":109508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+YCRA9TVsSAnZWagAAzosQAIItjEasDPXgqLxRBqAB\nf0BYlRsL9CR+WrQjmLHvqQjOrJJjis4+Chj6u/FEs4cakHvwxY/RkGbwuhKS\nVM+miWZLwTKu+SRDnVLmJgFNcGK75+pZDCNE83ZuCaKsQRr7S+LNH6NyS6MX\nIlXuNVSAyRbYH4hmhWvl5s6n1+XPGR8seHjzQTG99dXsWJTzvIpwkZRm+FqE\nR9/MMiDEJ8sO6HdjIyNrRVwaL6Po62b91yKZN1r7aMfpcygBSX6OUqjAw979\nj9+rKaFROOkywnI6uTRvJv6K6XuGH2bFr+3U1cngqeJBGuE16EnwFbzufP1+\nYq2hKcfjCBkaRObz657j/WPlGE/Db/x9bgPdSYswHnTXdCYoPOhNB89Upxql\ndzYIJn/wCdwiEpzXt3+gSk9SJN9z1Gb2SllXIH8gC4ncy8TG7PWtxrgqNBeo\n+Aa1oj+pb3EkBTV+gG2eVyoGdtH6/QR9Sud5Tq4ujLa4r1YdX6Pc4FPB2ywd\nMX4zXiyGAsxS5+LNxrduax4MpmCZIzaRDCPfi1ARe5fnqjnBTjCB9FJfvLfH\nN/TygVR3i65XvywaaRTBZ07ehlKLJD6/gscN5N1PX+tzDOcnWX4/Oaf9lWQ1\n2xrA7MPtuLeUDPt8Ocz6Diy7kohFzR4VrKYtW30xxLC0GHI1v+oZiNLstJvn\nT4kl\r\n=Gum1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt0ZDBp3TF+vnWZc4RCQV1+8/CZLf26DKRjUGg67kypQIgBks/WQCKEpm1i097m6lpn+3hH4OloIbF7sTbeUTxTzc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.20e2081c.0_1631575960307_0.1880520313511953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.583613a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.864798678.0","@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-button":"0.24.0-canary.583613a9.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.864798678.0","@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-esPYR2doy86oLBaQ3FjqHW7hX3Xfy1fPN+Wdxz9mGWzHxsx2JV6vPs5s0opM0jt01rSL054vBQdbQZf7mUbxyQ==","shasum":"d285730b53e57f6352b5168d15d39f38cf8992a6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.583613a9.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQRCRA9TVsSAnZWagAAWVsP/0+hTMoxGEprGxzrWLv+\nPzl1r2I+/cRb8OqJU72BDku759LbpjW4TVivCZ8Qblickmobvo90cG/eF8Jy\nuzYbprs48VvVYVcTUPm/sKGycgdzmVxu+NejTEC1vXn+9pScvLrTvFmiFgFI\nzLy+dsjgUgI4wE3ZFernw7o7vFZB+g/C8MBxYxdk9b1ZKdQPjxdqaJimjrTr\ncJ1XH9OTAQU8ccYxqgv+vKgZtgYUXDUQcps1ZRv2IbEu5PgJ+KAzvPlPM509\nSdUuGyIx2cEwf7wyY3aOWr4kX3nXg+7tfBOD7BFfl0H12y2oHHKLUkL5KwGj\n5IRcja9A+STz7bb7uZAWMuDFj2i6pxJiMm5wKCjiW6VKaERN+1avlq5LY13P\nf5w6LB0mnSNLPF+jNxrBn2LCLYNTxi1nmO/hcSWfKfhgqweHsyIdlQJGuxPT\nmZfFK1dDDvR0ZgLoKE5NdDZhYcriOE6Y4n5zp8hsrBql5//0G4+M8U/gk9Oz\nicNnzVWlEoeWYRGcPjJDce4G1KJp9r5XQRb5S4waGeXyHXSP/osDt5TgTck8\n4pQ2QnoS81Py3v4YKZWED5xFc5v9g4V9IfHc9a0nE7hS+Zab32A/crALTsxk\n8sdwkOAGFMfF9dzvTgsIxYeiNiJQcPAiHSARYydgBPnhF3QzD5ooNSD6khI5\nbf8u\r\n=GwYw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3BgNmvjje53iMRPEThkBqun7oYCld8CiFUyBT/D+QwAiEAmG7t4b6xUuxda7QCVjHHcJ9i1XM8wZItyI2EQQWMuis="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.583613a9.0_1631638544941_0.38011062174470545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.08398f880.0","@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-button":"0.24.0-canary.0e1bd56f.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.08398f880.0","@material/feature-targeting":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vKUZXD6klqZPW6D3CkUHwLpsU7psntNChjn4YiCIa4bQOyB6Fs6FecdkCqOh1RaDh0k6mqFh/v4G2hSngPR12A==","shasum":"81b82ed48ba6c464c36fd85fa0703e4c23d81bd1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.0e1bd56f.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNy/CRA9TVsSAnZWagAAF9YP/ifpWzHju8fzYFyfH68T\nE7CQmUWv7pfRzU2LSnDyKZysHa5NtXkwCHxnlVcWpT1yGpiLbhaDRX1RTiPx\nuGq+KM3lJlOIKGQXaNoxIhsnIrLSdY0d01enBQstC5+mXYqhdeLBKisF4pIc\n/aepnRrUjmqy1beHMGxzM2leaoEQp0045VUNXdpAir/V1yS/jyJIqnJaHtGa\nMK8QYytL1BGfSAZr2SIUi0GTmxYOmBsNxIFCllKMeHZ71yQ3GQljgAlLMCa8\n+vDtkdn31v1a5mdFyZ66QPOHL/PpI/cHrg78u0zqNW7eqqGZuaJRfwPo0RGw\n74A7JwnN20t/Qhz2v5fx4GCpx+Qrr8LA1zxA3Wzk/zpsP2o41DCYZ+Z9c5wS\nob0U6fjN8KEYgxGWD6cFf7CuUFl4RsrukkPi1mjNTnczqPAwRA4bI241JQZg\nIgrspxIEnsW5PNvipe0/DZk6r5I/KmfWLTeuZ+go1M6ih0Eg1KzeIUDcjIIu\n/1BMGUv/UUUqKfZ0BpUgVA8l6GKEKeYW22v3JvfMBmlHHCG0ng7vefSbMSRI\njiVHtj4NOseZtj03lyZmbow13xx/n+IUAcNPKbx50ySVxeLAdCFDAVd1WROR\np7ZDW6GbvNPeBlqN3SmeW+QxTG9pYgNZEly8zQvjUxVXEoVzxiy95gHgB6We\nX7LC\r\n=tGkI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBNiExx6N/5CEKV3VSeIEGUakrIa9al7slX44Ot6o/LAiBc7EjGKFYLJ43FkdOobxbJr4sBBu0Fve1OQ+bYjcBx6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.0e1bd56f.0_1631640767763_0.5593473501012289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.7bb1818e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.08398f880.0","@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-button":"0.24.0-canary.7bb1818e.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.08398f880.0","@material/feature-targeting":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NdOW2gonRP7guIM5HZKT23NPS1uF+MVfKBre2K7o4EbRgXoAOCLz6ubaxS0rFQSsx3QDow1B2TiSKAq5x5sVnA==","shasum":"60ed2de2f7b49f3fdb5e4872b9a5054f851ae5c2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.7bb1818e.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUAGCRA9TVsSAnZWagAAgdAP/Ay20RHj+F4yHBpSWbVY\nZ/wE0KQ1dTi2dVAyQNM8zcyqwav5BAm66+q1ohfw39d9QE4HlUmZ5LiRGPDc\nLw72lQUjNvat0wPmHv7VpW8eY9UF1wDN6h++++e8dWmTn/LEVVu/wOI1g2z8\nXEGJkpqESgt8GzVG8HLOD9ju37Su+/r+pIO1EOtGeJ5hprjGARvjm+2g5T/u\nlRJC7jR53UaNNE07gy22k+vXslbDGe9Dnj09LzqbyylrUFPhrS4J9CrHBZSA\nS4XkRIXfWMT0+m3cs6wITDsiqtkz9fPJSpu7Bs+cFPmP4mg0JnO8vj3/QKI0\nedOgCAhxpCrHdw+rZRe61ULI01Fbjy50RkEZPcz6iTQ/ihkwztqn3uUc466T\ngRYhg7RhfI5rRQELOTADrLOQxnme7GdFBbWWoJ6M6obJvAtv9Wljd8wHooBQ\nFwceNpfbgaK/u2+1qArxhl5goBJLpAijOtAfQPgCaAzjrndlnUZ94NVwe9jY\n8cBW5eYNvBi+BI8GNTffZdhfvpOWRAoC6laG99wqGFPGqtRn4VmBducL8G54\neZUIBeACnQbi5eaC53BIqCL+v03t3syzd9bHtbWr2M1NN2AhWETeP0T8YjR1\nOxMIurkTtDaKsnDhLsO5+8+oj0L1XK7JV6GvpyPAXkFOjS8hqlY+iaZo7L+P\ntsh0\r\n=tSPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBOCMGOcwm3kd/gNwh8boiyli+hyxObUr8+HNRxfol9wIgDtAhJt1lSqigyGonJk4mpY9FZ6T0tCUOgN1Ndvv32Z8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.7bb1818e.0_1631666181907_0.4540302260675275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.b5e665a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.818f4ee93.0","@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-button":"0.24.0-canary.b5e665a9.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Wj0Y1e/U/kpB39EGX5ANu0mUWddrkRZLfWLGKUXmAdwr47HLJgws6zZUMWDISNKoYN5Cw3iq0kxSicYEm1d2Mg==","shasum":"482488094af3336e858652754de945ceff9d6c03","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.b5e665a9.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfRCRA9TVsSAnZWagAAruwP/jzOfemftdM4BHW5gxc7\nuSTS3/Qu6sZkd7z5HCdLj60JmAKwzqatRgsWKldbYHe9YDyD8okAsH9p8mMx\nDBT6F31DDr3fZdWJ7/n9SGmMZY9N7U32YXN5KgeNuYDvtuVoT0w6w/tZyRws\nnj6+sNvDgLi5JnpWhzX191F0apuacnYAS65nEbhedCRYBPbtO7CB60Psi3Sv\n8dEzw1C1FL+oePu8mMe2Iz1f8WQCpWsSBoTQW8NaJ4h3dzZNou6BOsLH7W0F\njE6XxCUdefkLFuKPjTcNRfiu6WjNwZTaQq0de4xuVPz9oUzRlNEj5VKFIgm+\n3doILz/mitgxgoXkBQJdmivHxrpPNuLtFXgS/mNflFB/Y6E+3raB1JQO4ODM\nOAaG4kTuuWlBWo5/SKPms6+e3g4IWRxM61Klsud+bXOK4XzQRP6f/MNi55bl\nYlwMn7Rejq6juky+JyePBypviJNtMFFesmrHXC/Z495w0fRnegAtAKGRP8Rg\npaLYToc+OuT4sdey28YcIWdn9FhADWmxFotl2Elunde8fEVxv5K7/Le2ER5+\nfqMk5wYSS+nxLHeJlvQKIAmM01jCV1nu0jQ7qhgK9sKeFYP3fPqwSHk7J2MS\nkfaNtXArVsgkNjsSjEY2MbpGBDs/uO5Vx5utajr/Gl4Z1WAmaTxN2v4zWPWf\nqlwF\r\n=1sKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1myBgqjxXIA4Eu2ujNmzNBIyEgmoJYBQcB+DvzuJreAIhAJrqFbhKuvwNjGm7Ef2MQOhiLJCngZ8m8wrQzeQw1vn+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.b5e665a9.0_1631729617723_0.20765421931260697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.ab1e177c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.818f4ee93.0","@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-button":"0.24.0-canary.ab1e177c.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rG4f/WBDt3LM2yKhC78B4e+cvn380xUxa4wL0VXy25pyS+X/6TvVViYbbYZ2kGr4uGBn7olJi0oslUpWQFkNPQ==","shasum":"4c17013ea93ae484d29a41a951dc41fa04b0ae97","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.ab1e177c.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj9BCRA9TVsSAnZWagAAsucQAIuXmjE9EuF/D3lkWYJ7\nmyyPwkAC14EnNTcS09GgAZjF1wtZ7diNfVL+IgJKTMBue/1rR/fCKPzvbZY9\nH+phW7ylNBmVreJs0i4T4bjs+ZGRrMzqmbeaWGrr+nKpkYP/NCs8OxQRhtQ2\nZTQ5oK+BiXQG8VKd3k3tFQfMMLlsR8+5ulZIRb11TLFIMSI5491bAzquxzea\nA1Gm/EDsJ8ut2g5x9dHlh7zzj1n6vhvRT62nfYrmbNe46uKKYLwEzq5cdrYT\n7A+aRqJ1Wxqtl4LMRmzQNRAiHKENNxIOxyejKUGjqAK3wlRFvDioWLuo31l/\nh9vQ14fufTthbg8M+oB1lFR0VJS3222iW+h1JR9JC22xnjTxRzFRPTM0SYdN\nNg58nKHvOfqibmFJ3eECGrt1gxs9BmI9cafpvEV67gZaaZjYvRgYbSGiwudH\ntgAjgVWWDzq8bpN30IeQETHG4K8I0WFem/4n1CCO7N8pIIjzPl79O7x5O7Xu\ndSVE8MVJo4tIlijY1iRFKEKYF+Gn/aaf4iJR7epibUXIhmoKchG8RIkDrAhk\nFWBP6SFMCVm9ZSMGcg49+vCA+AUEPab91BlOEZVPI5+TlWgW7YeIK52yT5hL\nA3X5RUk9jwie5+ZJQxlEbu2Y8DHvagVLFGlQ6ptYFHdQ1n5RNGvWJfRGB/oD\n1YdY\r\n=YjTp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkAUOehLmyfr/Cg63N1n2AfJg02Oemi3Y0+28h/YYNjgIgRyGsw+5UbsV1n1NIY2OxxgPev7+qKmE0oDYHXgZ2Sjw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.ab1e177c.0_1631731521464_0.37548674370929014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.8dff8894.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.818f4ee93.0","@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-button":"0.24.0-canary.8dff8894.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P9vHWFQu6JIUhYHSQvwSTkhYUibzjBa5jV6qqnyc10DPg7F9BlMkaoPG5V4YKToz1WpWaxrkd95P7rvw/KtpQw==","shasum":"9ad66da75de68c99ef02ecb83a653f738defb617","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.8dff8894.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTPCRA9TVsSAnZWagAAGVsP/24AumsWU/T3CTvoH2QZ\nlq8E1Mwhk7ikAWTDkpqMcTJweT05tBn5uIugi6rZm+7dRlTqAEAFSiJQl61a\nRnk2mlKroeIUIP3LYM1pF99K4XtPOPeIDvN/ASidbud8FEy4b7GQtsxvpkTW\njtJnpMwCijmSQKBzUdS+IK37JYmVWYxSY/wdBJ487GsRDI8S+LZUDVhgVasK\nieQOc8hOXEPEaaLP3OoN0yeZoY2zVAjmJZXHM6dVNP0pq3ca0eGMvTd6iRTf\n8QIHTEqly0CwOHivvHq9SAIpZNYIgwHsFcJilYw/ZQvvVOchJEbw63N+y1pt\ngX92rPGCFZ+Q0koUmj/Xx/PfMozweZmUbJDoNos4N0/RX31cj2lXDiCnY89F\nMtuI9Ub72U+RmUx+wWOrhOILBpaWrB092KkTlyQyZgHQY5hH/ZdBtfXM69QW\nl6b/HkudPscW9gcHaKgC9zByxV8l4RNuF38VGCQw/EgzsmwcA+0ci3WLOZr6\n2JhJGy5/pmf7+VdDKQoMSX2GRGTkhbFdMGl6OHG1nTpeNZp4TH7RGFSl5CKP\nfMV7IDW4JxTHq6TdDujo6QOgFBls/rvKnKfBLNStSQRlnXyOs8HplmCRUKYM\nMY1UvqNIrbky6P4meQVi59sW2vsxm8M0BjsQHyw/S2jBUXRT8ASOwFNKjUy1\nsZxK\r\n=D0zG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp0o7lTT6Kl6tglQx8e8k5Kpy8ohuZRXqr1zKcqUGKMQIgRhfJC8NobOHKSpqAWbxpBcMZBNOm2uAC/JMr2vc3Cck="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.8dff8894.0_1631732943230_0.6908026863720549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.9cd7e927.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.818f4ee93.0","@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-button":"0.24.0-canary.9cd7e927.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-04M0LyvhgDxfe9H754uzHeiwgxK8fKXFXt1dKxy4+VQMSsirl8iGcVnjubRpVHTnuW9RuXQiNhxgg+j8KVjrMw==","shasum":"9232a9929dfb7d4179ad32612159fcc16397a518","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.9cd7e927.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhoCRA9TVsSAnZWagAAxSQP/05ss79XD5KrVZNqJJ6y\nNT0jCGJluQ/UCgNPMim3uiB5O3lCVOlv9aHuAGSZ5yU6vZHeydcu2Q4pCmWl\nCFKxEjP/FGfWowdvNew/gR1jgpUh9Gex3sm2ua7JVY5N8zsh9gXGNsWOYH5v\n+xdXwOqelXwfbVWlhasnPRtpTGQO0+H8eMC6ZXR7CKWnYAmxMSmV5+plrd3n\nwdajzzrzKp2+o4rEgD0EmFRmF/3apTZn1erpihaZD8M90AyQHhjlP/a9tfr9\nI0p7duPUFieQGK20+grvalRfegMiqJkffzEvt+JRLolKjQnmJ0UmvP1U4EIo\nunGS1RBbncRuaxAV//z2OdHl3g8FBchwzwbuNugC935OvHpcKERAHjB6JJBR\n97mwlXuatpzW11UbO4lI8CsahTEiLgz9IyJ0LRnkD7nu1dw0N5kbWgUzpb4k\nuirA0EK5k4NFA6jERGhmmXZB4xUIwPk6lC4cUQcYpZbwGNI7MVwlEdOoytGt\ngGcyPG6HR0XkSxxjLgielNHirs53WnRIJuYmoaKSKB9mBfNh4+FfryEXEY7r\nf/hZX27h83BtgXlUlG1KcwjUwNpCAcb51ovqJd5UTUqI9NnYuU2GkoPSrfqt\nKMcgGEfEAHR9txKYRK8zzcbSAAKQurnKjkMavrZaj7oBlZU0F4Yt/ZrHCRjT\n5y5s\r\n=bdof\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5fmGx5dM82MpDlCTaVUM+ZsEn4u0kpiUFXb/jlwbMYAiA6SPhVs8Vi57Xelg2ht2bBD0BsY1JnVhhXkA25xaOFkA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.9cd7e927.0_1631737960270_0.5830649576801012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.a7132082.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.818f4ee93.0","@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-button":"0.24.0-canary.a7132082.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w4sELV633PyahfBX3uOSrBhStiprSkhEj6Pc4FzCny0JpoVhZY9tCoJu6TXbAFiJrGwY5YYnGViPyLxukSGwvg==","shasum":"2c8036610d4db52360ee66e8036fea2716f7bf87","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.a7132082.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmoCRA9TVsSAnZWagAAiRsP/jyoOH4IMFNApvnW+OTg\nADtLPF7+g0ckOwUyXn6EuyH7ovBzwrXfha3/5eO4r3xTcvE+Ug7xrbk8udpb\ncJ417flGrRNwxKw1vgI0zjY2MCqTvv2qyso7/dIZpYn7Wi+jDRAESpzLwosk\nTqoCmo7Sekjwm5FPirJ9aRkKlhbMcJKxnbpAgGAKa40HBEurCvE9aEIkJC9a\nFJVRrNTpYzYXwgUlAXiAcR3f3UOf+/LgOx/K6hByG9191toHgH+RjRtI2xxD\nNHVZeWGEsiEZY1md2YT3JgJGmChWb6Wv0cDM0HgJwbxePSg9ybmzrbffrSRv\nKDjHPnD2DcfRhvwDdosvLbXQKWtTGz+RG2Tc/UhtWtbNP6hJN157Y9bgzhjE\nPzyM16pIQLd4mOsnaLIGCEwYQ76PqXKRH0srZQvI7FVjqtKac5snOVdhR1Vr\n+zZPTJHlVaHIdbDsx2pAF4pG8idRSgsA+wAqZXFqIS3N8XwaUeAnhwehn0bI\nvvadY9uv/GV5bG8q30Hd+aLX93zXfNOQhxiUIXVRE/+1JBc0Pw0JmAHJjwls\n2yqSzpMAOLfC7htz0D9sTtLb7R5ED+H3UCQxlrd+M5+LOmUP2ER88ecqzupV\nEClPQ56gltrY5bcUb38Tpqul4QGsNGcA5ZVaA1oOICtXTCNr/O5yv5r83FfP\nWhqS\r\n=EpE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBO4iK9NOtOUb0t05tqXYShTPVPMQmyk8wHr2UBh+lv6AiEAlTCv+TMvU1XWYE4GooTX2GnMmqHfV2YccvsFQhOTDk4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.a7132082.0_1631742376263_0.12041072843437028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.cd9110cd.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.d4e16a6c4.0","@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-button":"0.24.0-canary.cd9110cd.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N7S8gNEZPcnPrG5ikSYnq4aI6b1FHAX/FeRXGXy0rRh1AFYPUN7o9aZE73c0si4qF4ilcISOfalp9rMJ1C+9+w==","shasum":"ae4addde0320a76214b614308d66a8b8e40d2c0c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.cd9110cd.0.tgz","fileCount":15,"unpackedSize":109514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LcCRA9TVsSAnZWagAAcjoQAKPbwrpMgGVxIwy6Mnxd\n99Xkhtx4MKwNp4igihOYwcHNfNwrbbAurdHSxLM3DM6zWKYh8yzoKuaXOY6B\nadEW8Fi5aUiR5qPuykU/Se3IK41AtgYbrDUXzU+jLsUACwCI6gpVReNKpJTW\nYF5zD/ZJTSOxEz29cGzP18Rn83CZp7chXFw0TCaTXLUdyrtpYWW9d4/x5/tm\nvSydLuaDT8zd4JKt6h0qSnF9X3JbiI4Mhr92uGQmMaH6HLDQf8h/Tfy/DU4S\nIUdZarDXf1xNILaqT7EdMQ1WesDC9I+Ut4Ex/yaEUxpihnYhCcUHOS4RqB2P\nLyAcj4ftDn7N6QyJcTUb+rXbZumBPKbRxZSkY3O3x/jLtKdaU8kxp64eO8QC\n135ElSAi7whQE/6pR0uqSYsQYP1eabYjeX24wFMs6s2NXvBS2N1jWFoYi24F\nTBQFDxITLGIucTBGDPrTm+4HHBGQtIFB+FNa4ReHM01lqRq2uIGBv4bUlj8x\nEf3dBWedPR+KbAhgPkHkSl6tvcZP5GdsfPwEhuRyrAIm6fJ6k1okcU0Qexir\n5YC4+kKHIUZlLZOQ1sabgkdyzII75QNMc5wfASoKu2eLDTrOoawS58T1UlIk\ny4G30j+NTEjXncdKKSG7slJX6XfDHOCCvWXuuDQKf7kx+T8zHqGznW+aGyaY\nn3Qi\r\n=VMfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYh1zF23T0SwWIeEf7hz/GEJfztX/z3+OWD+Ux8urg8QIhAMJTXM6l2QQ43aNRAIjYV6pP86Oe195C8PQoBmtNcvRO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.cd9110cd.0_1631814364176_0.3929827214021928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.1e5a9883.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.d4e16a6c4.0","@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-button":"0.24.0-canary.1e5a9883.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YtLa5EK57QSLybTwMu/2Uhcd3DXygIq2zPiWp5kxmekjgahNV7FCaY3AzIAyS/U7lema4+hbqrI50D+Z+jFUCQ==","shasum":"78e4417abdbb61bfff724c879e35db742d3ecc38","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.1e5a9883.0.tgz","fileCount":15,"unpackedSize":109514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaNTXp5xmBz7B7UgUgqHGYSbZ/SPyKKdPKq9VhjTgRSgIgAkS3U2UeuzC0FsCHFJfQRp5a2lhZB4rYi+v0FGg+43g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.1e5a9883.0_1631911164181_0.5405528298487532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.32c830ee.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-button":"0.24.0-canary.32c830ee.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-v1HZbbRmdCFxwwn+mxfPmp5SP51z6YtBNY+PQC5Jwk5DZz8jNyzgSarPpSrPygBKOWDNsHTYAiBcFdyJaQYJZA==","shasum":"5b518270baefc5df60d73796dcd85de44d70c50b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.32c830ee.0.tgz","fileCount":15,"unpackedSize":109514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK/tBjEkTMwyjlrpJivH4GAe7a/Lfs1r4eCRriBShPBQIgJtef3wgc+NrG2h3ZnGe1dDF1TZ/KDDHS0g4sBdQ4V40="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.32c830ee.0_1631920143424_0.2673686452831261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.1de87bb7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-button":"0.24.0-canary.1de87bb7.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-N5igmg2nB1NOnypA1y3cAoRRA3aByKy69n+7y5q5x8Rx/AF6sS4DWycE72vpcOVxGBS4Zzgh/9t5TH+yjGzbbg==","shasum":"e5c534c16e1a43a8f9e2acfd2e9d4caf9c2cf2a9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.1de87bb7.0.tgz","fileCount":15,"unpackedSize":109514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLMrNLPUDRDKDaIWNKkgTEir1D4g2uqmypftNfVBTjsQIgLvqzaFnJXtMpFIJYba9dpeYCUSnoLw0c2bbOHpGZ1hI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.1de87bb7.0_1631991145260_0.317049332206911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-button":"0.24.0-canary.f2ea80c4.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-+knq8rDElPDT7ByiawKyT5ewiczCpghLCIZmsNDWgGtzc2jySacYpCB2KALPFc3YnE39Qgbfx2gjHE3yITgchw==","shasum":"7b621a4f36d4d97b06a4cfa08f8b5f3e8da4731c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.f2ea80c4.0.tgz","fileCount":15,"unpackedSize":109514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQbsZESltrb3IIPloaOcEdOGfJRn3+OLTrxTAgtWwNsAiEA/3MwSH/TYS72Z8wNftNB7JPss0JT7z6Kp3Z3U8aWysk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.f2ea80c4.0_1632160511220_0.46633754460740673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.569d739f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-button":"0.24.0-canary.569d739f.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Ae3T7cQ1j/99BonGqBXKffzAh+E9JlL2/Lou+b/JvXtMN7UypHdd9+oMN7p1q4lPF/t7T3ZBCDpWFhxVqWh68Q==","shasum":"b5caac96f63a5bdcd7681df8fb01efc1e076f063","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.569d739f.0.tgz","fileCount":15,"unpackedSize":109514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRYpIJZPZzXa4QUmuFrkBdyd4e+O4Nu9CIufmrIV+1mQIgLe/xWniqVbswJKNF0zH7IoH1PIfafisW/5TGs2ZiVQw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.569d739f.0_1632173050804_0.3414248059253764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-dialog","version":"0.24.0-canary.5a434a50.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-button":"0.24.0-canary.5a434a50.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-f2DCPjNYzotsVU6scdYk0NtUP7xo79IIDrf/AHQlrKpLwAtcw7q812LwI2hkCI3TiT5Ne0mJuVW7vRgIDoMLcA==","shasum":"d0cb1eb3280e7892aa6d39aa0d27bcdfbc326409","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.24.0-canary.5a434a50.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9TaNne9y5ikGYhR8XgPqZbVRA7uLotV3t8mrSRiyN0AiEA2+zIWpy5E2Xn2/Yfw7QwZPNBG6qyQXQYnm/Ym7TeEco="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.24.0-canary.5a434a50.0_1632189665883_0.13482569130894517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-button":"0.26.0-canary.b1c1ab52.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-lamm3KS9w8q1C4V8Iuxd9uJE0iZjhNYgO7QqjJeDKeqLIN+0gHNookk77eCP8qv/UiFH9IJyIWhh7nP/4TeUOA==","shasum":"d5188bf03512b96e33a9391f9686267505e799df","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.b1c1ab52.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICablBAD44DKNIxWibFFwo20CsNTrgehInJfDrLK3hX8AiEAy55+sZvTedZdUC2PoEcIsyOCNLJWqM2KufqV4hxTjh8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.b1c1ab52.0_1632193947623_0.6445914284051406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-dialog","version":"0.25.1","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-button":"^0.25.1","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-trsfXoX8jUNTRCcbTspP6T9phEBTmncHnDzCTESAuwu/hnUoJLeWy4HS/pAOxrKEgIOtED1qXQvSDwC5UKCe7Q==","shasum":"24428a422e3eb651707798bd97f8cc6a3b6e11ff","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.25.1.tgz","fileCount":18,"unpackedSize":137039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIhRCQ2XTuIhlJNm732g6EmBNSRrSJQQ3eU8FIvTBBIwIhAMs70OLOiV7KF5DGMAlM+GjQHJ9vmDCE0DfoFxqVeXBW"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.25.1_1632193967323_0.2588350511068309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.ae060177.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-button":"0.26.0-canary.ae060177.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-gZ+2foIaCcJYpIxv5vYLBRxf77RiU9yRoZ0taEyogTzmdGR8hCxEbAJrhRcanVdy2Rf1diSyX38O4DQlVk+7KQ==","shasum":"ef972a0c6d36ea133a99956f37c9ccaca02669c4","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.ae060177.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFq6r1ucfhWLwNEPqjI3oNc42E3BUUcCjsqyRc+ICmeTAiBhIb1UgDGdDqgWGNEwfvzocGddi5UhVqDQ+bs1W+ND0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.ae060177.0_1632235104674_0.5959011210284393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-button":"0.26.0-canary.b6fe2a12.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Z1FyCDh97jVgMXhLegFDjHEt+tYaE9zkJOr3LxoYBbT78chn5WBpzax6XlBQUeuLFL6rrInkBjSNIAKnjbThBg==","shasum":"fe2880e0899135374dd7085d83e8dcc7931d60c3","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.b6fe2a12.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5wRH9VE7b4KE7IdzF9LAU0lwbvqitCRvISkMFjRyAiAiAZWQbpGPiSVj9ng7WccNDJPyIpJ36sieCNLHDCH2l8WA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.b6fe2a12.0_1632341793781_0.2533578085797241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.07e91417.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-button":"0.26.0-canary.07e91417.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-kEiwdCao4vI1ITAHoooq3pY324pt6Z1fkxpJwi/gchPgnByrjpCnOvLAqCVz5jd4GUd03WagTZWC3Yd7wP8fAA==","shasum":"00e3404805248153ef3371005994b3b6364b1f95","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.07e91417.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDADTgdxaXC1tvywausOQrlANtnDYweC8FqHWeO8hujFAiEA0PPyyO73n1kAVXBvCwRue+NO+rmGkXu+IBuuNwyUnYE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.07e91417.0_1632344765719_0.4968043264994051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.e2203ffa.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.65125b3a6.0","@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-button":"0.26.0-canary.e2203ffa.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-RK8A3nvLTWPdLZMJQbPGbnRdxIl/h4kKNsqNf4Ev0NtSXT1I5KX554CxSlo4KyKiyVzLbp/QTk0MoruA104Exw==","shasum":"c165954774fff8c100db7fdb06a5e0d20f37d791","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.e2203ffa.0.tgz","fileCount":15,"unpackedSize":109506,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpo9Nnq2ZSH909GjMeFKrPKTw7U7Ez7lKUgoy6RDPV6AIgBst64Zinn7PtCDl/H36ad4sgKHpoPtmkAZJ9GOL2aOo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.e2203ffa.0_1632421675791_0.12978530741007632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.4abe237e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.c79aa0cdd.0","@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-button":"0.26.0-canary.4abe237e.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-95GSD2lRnRXJ6xBxx1DkI19sBPDpJTnFKAOXQ87cRhE2gWFxmNsKd0Z8bSIU53Kybakac84wrxI8cS51vyj8eA==","shasum":"aa9a61b5330bd25e05f151e96b5e47d59e2d002b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.4abe237e.0.tgz","fileCount":15,"unpackedSize":109236,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbl0IYi1oEz5N+RyySI8AyrB7Z+UwngKCuYKHKeDns4AiEAjdOFZcSwY+RE4UgAd+CXWAlEyG1a7lmFVs4Cqyqu3nA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.4abe237e.0_1632504685766_0.22057006683270486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.6278ee5d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.c79aa0cdd.0","@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-button":"0.26.0-canary.6278ee5d.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-kfdsCX4LMsvkrmFkkoP8ICQnPgMnVte7r0RNdMT03H5VtpiEQGQmT41FzFaEZ+yOYPqEO1lj7J3lKf/10UbomQ==","shasum":"645cfefa575ac49d5975771c23167afda0f9b551","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.6278ee5d.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID54PqagbFfdXvNh9+dfnaqDIWrs7psWEmISIMuetjB6AiEA9mJkkZdOTGcLosZ7dKC7PdChGYvPfqqdUUThQCk2iv8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.6278ee5d.0_1632767499130_0.6432014365719843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=13.0.0-canary.c79aa0cdd.0","@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-button":"0.26.0-canary.3a5d5f34.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-XIdYZIoqWd+FrsGFiExbeM1dEwU8M7SEd3r+6eE6GYiSBFjG03YUoinYuj/E4+4iGqyh6xWjD8Qtgg1YvQEvWA==","shasum":"e7c16f7dd749eabd3659a83ceda0df911cdecc8e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.3a5d5f34.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjdR9vE+eC0GFhKmFzhQtKevfPKq/xI1sRKLjknFtu6AIgNMqkrQLdnlLrElhx2GNvnmpMDsEFyuOHqjV4oFzB7S8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.3a5d5f34.0_1632782508717_0.5634846278626151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.143ed3c8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.86b50ef74.0","@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-button":"0.26.0-canary.143ed3c8.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/feature-targeting":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ClXK4tMi60y5PZAW08zRwPO2iYyI/7myv3XB9Gs6a7pj+OO3tW2YwdSB7qEIWJptFjqk4cq0C2cd4D+TNTmevw==","shasum":"d45efb26733579e47d3cf946cf2df2b2d4bc69ae","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.143ed3c8.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1HTVmTQ3OZGqifmDyRNIYwvjOrreaxogxZyLjUaFAuAIhAIAEVj8ivn/LPDMpxy03AujXDNNEsy2SEJLPovmoCq2h"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.143ed3c8.0_1632880268271_0.4231462056418418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.e5923d68.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.86b50ef74.0","@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-button":"0.26.0-canary.e5923d68.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/feature-targeting":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-q3/ycogX62s1aIQBvDibA9DGOJvwKY6jo7Mo5dAQBC5j0F+U/vWN/aFlfaJoDk5QaJpGpg348DX9yyICcuRKig==","shasum":"6e9d36dca269ff355f134ef44336de42242483b0","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.e5923d68.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh81CTqXy/EH+5yGLzjpAXxKzfOpavcG7gnf372Gxp5gIhAMB/ngniSedOY7HyXioiI/q/JyJXTObdu/4q5LHT7dXM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.e5923d68.0_1632960367026_0.8933562580602494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.d8ed5109.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.586e740dd.0","@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-button":"0.26.0-canary.d8ed5109.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-AeXUGQ0AJLaWXMIeBO6FQ3+HV5FTIL0NcHMCgCa3vktGBfhM5O7ELAQZWkxl4dGMAqGgBVgcFxivImLebY1vNg==","shasum":"de44e83b7f8b648ff2489a05b3eb65876ffc4a30","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.d8ed5109.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICy2fhZnJ5pW28wnRRXS5GbhmQCEO+9Q4wWFFetd2RtZAiBbRvEfYOQQL6VrUlhBanmI9VObz+ALgi8w+/Uy16eD+g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.d8ed5109.0_1633044850436_0.5665692099545421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.586e740dd.0","@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-button":"0.26.0-canary.0efb9c2c.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-jVTwF5zq4yeQtyFb5yLsN9jzlKtoEArRpeNSfCO8EncO9biKAR9c8u073MvmSl1fTUjwxw2hWhtCH0HTQyjX9w==","shasum":"55a96f3b9ea9f8353c77891c4b79669f96f8c22d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0efb9c2c.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFs5jx7bU2NQXk+M/h7NGfeJJyNtxnBGxUdPY73p3FhSAiEAnCGnSu+uFzkq3GAO7FAJAFfYOs2aLLlzejj+ItPC2K8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0efb9c2c.0_1633140514407_0.9765310609281133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.586e740dd.0","@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-button":"0.26.0-canary.1c9adcb3.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.586e740dd.0","@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-WZ+spDTghC7FMliwlv+z1okcDUf/l2lRmvcxENDwXJzv5Pzugw7J9UGG6Jqoo1fcwVS2OICMkKY2oPK62DHqvQ==","shasum":"bab32e58881e363a269c5891da575da7507b996d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.1c9adcb3.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkIApUfySIbf+0+lu2KVMuvjbWUDt/SSJwHJ6/PMr18AiEAyX46OBeHWbAqGFvqMtL+bVfdbCslZFmmdVe7pVu39yU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.1c9adcb3.0_1633368831212_0.030247752968591834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.dfc00d60.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.353ca7e9f.0","@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-button":"0.26.0-canary.dfc00d60.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-kXAtn0S2nWAFmTYSmWV7bLGm6LE6uSEOYr7O6Ln8p/V1dYEObJ28tHfnQnrzgmLwtr1IM95Yy2pUrY7AXLj39w==","shasum":"051cd42264d654a5d61ae10281f10fb75b05e37b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.dfc00d60.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2rIBonOB2L8qs6How6I72Pby/O4K4HQJM23DhXC7lkgIgMBqz2I+ZJXybSq+vviqPBqiN3RQWvtbE0E2izBVmPpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.dfc00d60.0_1633741051502_0.09327513584173452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.c3aa844c.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.353ca7e9f.0","@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-button":"0.26.0-canary.c3aa844c.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-crmwZw3/luaFDSaVkXgjeQbAfuuhNH0w8kbapTyemstIkr+vmFLzxpASPScCM/9yvpuD+v4MfNtS/sNkRQ84Vw==","shasum":"2c525fb530107b57542f640622dc2e4bed49eefa","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.c3aa844c.0.tgz","fileCount":15,"unpackedSize":109286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA38PAopGe5Y+e/ED5l2K/5cGixwfg2W7S6GN6Puy9bkAiAeJDxFNJT/A5gDQcI+07G4OuxqUWzh7l4P6xfcO4dWqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.c3aa844c.0_1633994078201_0.8136962220349326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-dialog","version":"0.25.2","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.353ca7e9f.0","@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-button":"^0.25.2","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-1O2k6lgqugYKau0Fhq7dN7tGKW1LrOJjMOrx5dX74R22uFxBqaf77p162TK7KS9vnGgfLzCV0CwveFOdKsBskg==","shasum":"ac32d7274b73c9e8e33c1bce4e9f7868a19119da","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.25.2.tgz","fileCount":15,"unpackedSize":109234,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1hqRnGt1PODVqh5v3Heyca//+BOBBk4LkiH2PD4vWCAiEAruyAiFGI8OS0p7GQ3wgkMlFtLVsbu6RmiJvWUT7yER4="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.25.2_1633994319332_0.5863418860020571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.406d6fe1.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.353ca7e9f.0","@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-button":"0.26.0-canary.406d6fe1.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-B5fGdA6ZoO2OJmzMNg03jqSbSQjgvfKPOL9gETzq1zBd1H6Z+tkJrwj8+i9R2ojTeq/KbvKtu9+OcbUeENR+MQ==","shasum":"2d2588df311e44e382b3e6943cdaa38be56d39e1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.406d6fe1.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMUxbyMcow3RjIuJANqmDGZfcBwdyzS7mab/j6wR/BaAiEApe281DvVUreprMe+8cbwLog3dvG+caKH1kayikf5nrI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.406d6fe1.0_1634158786620_0.8842117764073023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.ca0a674f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.353ca7e9f.0","@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-button":"0.26.0-canary.ca0a674f.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-nnfFVKiOuzLZ5zpNgWE4hQsCxAPNH0Bdh33XnF5JA2GCnqmi0Vj7c0YOkqPqddgyAPHmRtdxJZuR1FpTDQ/qoQ==","shasum":"ccaacdd3fd18345fe6bcd59a692e61998dcb9d50","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.ca0a674f.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHdcDuHKE3AASS/a5K5vtEc7z+/YMvw/BUNWztiYBMPwIhAJk4FrratfyYoHO0YXLMSlVJChTOxuhNKzOt5Xc9e5wy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.ca0a674f.0_1634593036986_0.4180958864454043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.eefcf660.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.261f2db59.0","@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-button":"0.26.0-canary.eefcf660.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-20zW4QYOcBgwPzIWDKb9wvf3XUtI+y8z5iiG8eGpcK0aTRrhIFSe/ksZhnZ8dRUOCLiFF3lcIhcB0HO/uKmKbw==","shasum":"9788b8a13b6a10f7d8e0da237f1044a08d0fdf16","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.eefcf660.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDu/S+DDy3Rnmjh1DLahuvWv170skxa83nCa6Lm0RiQLAiEA56qk4aVOsZ841MBvhHEIBTXe0+Ar35XDAiiJ3PXfxUI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.eefcf660.0_1634765034364_0.19365935211274343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.d21acc8f.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.261f2db59.0","@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-button":"0.26.0-canary.d21acc8f.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-XtObaBh7YXLHkrUiZt6fVByd1f/FUVSpkepczxosbSg7p5tWf3CfIuAj3vy/r+z3butBuhsMyE3qTgxmm2+f9g==","shasum":"38ea7c8f6318675e1cbd26364d93060fad02ba01","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.d21acc8f.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAZ4Hmi0Ss648RzF+2xeBkW9QyBHln3hquJuNmd2pXowIgEoewFzftweQhtQpSX6sY9W+XUGjIHQw2UOns29NKPg8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.d21acc8f.0_1634769166762_0.8219850206695114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-dialog","version":"0.25.3","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.261f2db59.0","@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-button":"^0.25.3","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.261f2db59.0","@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-UpxAYAzKXO1MW4ezpiYfEQgov08p0J8KDVKqKrMwg7lsZRkAtUMk4YJkM6qmWGqGPqd/cN++42PMPHAISJH3yA==","shasum":"11aca257c199d22bfb5f502cc86a56853c6ae1f6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.25.3.tgz","fileCount":15,"unpackedSize":109210,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC836UsBBvX2ck1PUQNuFfc9sGSppP4KInuVTRy0pgADQIgInq9BK5oUtvFyHHxnUYq1BPHymjAMzJeelBvgSalKNM="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.25.3_1634838949633_0.7638822429416305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.60449b7b.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.9803d2dc1.0","@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-button":"0.26.0-canary.60449b7b.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-y2DX3INyqgcVdyd3HK3lEEoPVOvgTxcsEGhFUAdHS1xCoDkje7uQ8njnyYQKILehrDktlXBp3IWDcQ4TMuVqEQ==","shasum":"70401a3560de9413290051ca1966ee79f5d4c47e","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.60449b7b.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMaHXQElpnshGZdOnvRTs0TlVEsEnmKK0uTDLEVCluRwIhAOD7vogPTOsb51uwOPx24EX9YgypqmU7KxfL6EvQfYuj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.60449b7b.0_1634840266341_0.7205314126360707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0d8084ed.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.9803d2dc1.0","@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-button":"0.26.0-canary.0d8084ed.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/pbs8LLjKrF7Owu4PUHhXkG0qGSy5poDUOLNWSYjADvhhWPXHrnudMjytljlqWmUKRMV4hiSzIdqW2KqItiH2Q==","shasum":"9b693e42fe05f2b6c2fc6bf59475238d2709b05c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0d8084ed.0.tgz","fileCount":15,"unpackedSize":109262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCco+WHxXCaHVHsAm+rWHUxadWMONK64sxwNjBHCqdafwIhALy0YKE6vrutVoF3Bm641I2v3ue8n5nR6+CM6SNItuup"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0d8084ed.0_1635443112966_0.23203226026441204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.232327ee.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-button":"0.26.0-canary.232327ee.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-SbRo/JzPQckxTgZEIY990Gkv2ogSt8PbAtBzQYyFHuuuGN5EI49Uu0ldCu2J9lXXRDhz/WbMkKBCwPmx0WcB/g==","shasum":"063f5ba82be08e55077e8d2df328b7182f05e390","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.232327ee.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpvI3Q0aU1kBebf2DMwfArkS8ZUE2valCOSk/qRgKM+gIhAKVGxonqaEBTeZe6H/dMyohrWbZBk5p789dli0Go3+uj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.232327ee.0_1635797764155_0.9313428459973003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0a492ae8.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-button":"0.26.0-canary.0a492ae8.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-nD+zhdLZg/Wm+dQGztxAAnOciTWuWs6tsUB6LFjHK1T2P9Qq/idFTg5Elm5nlmNhHNTaUm5TgJ7mpqfY8nkNCw==","shasum":"d93dd096f15a5a2367d07ed48d73ad22eb4bf3db","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0a492ae8.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYOPPAYECivjRovVpdTSDTPcXaVVgJKJQjLMx8d9qhZwIgdEWdnfhXC84FxqaomSW5F+2hlEkrUi9qpeT44DR1xyw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0a492ae8.0_1635847241381_0.46122640498193723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0aa18745.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-button":"0.26.0-canary.0aa18745.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/zfanvZ48EgVr6WxCN6IRz0ifQ1oWuBkLPaY6bxYmReNCaNEolDUDzkOZa4aeDOpJtnTMUVDu/BebtkQAKX0mg==","shasum":"eddff4bb34d5986a46376eea95ab55e825047564","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0aa18745.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoDLgRwVwsIIIHdRvEzdcjJNpES2/LjeavF9FV1nnD7gIgUMjKTYDySHSUZLHEr5Fi2asDSJacJAXkmWV3gPXR6rE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0aa18745.0_1635876489835_0.7609687605574245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.f3e28323.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-button":"0.26.0-canary.f3e28323.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dzsb3/swqi8fAK3tdFzD/IoLoQbf+vPWHQvVRf3AJ04nZVEOrSfKu4KEqr2Nk+orEq4or3Gt4TuhRqYmnINxCA==","shasum":"9bed87d7f71acb10872c13217158849726838e4c","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.f3e28323.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+dWpHXbgIR4HaEgQocevP6OcUt6cvf6TT2csrfhbYdwIgB5mFbaYzXlkXvstjGjp71KtQgrPHdDbub/oYKznZ4Uc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.f3e28323.0_1635879592212_0.7103438776139428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.27e05c5d.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-button":"0.26.0-canary.27e05c5d.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KHhBYX30vJZnPdc5eSuBk+JiKlvnWDW0KFJhz+a4xWPdaev8yPHAU+KGg75RLrQJF14C+hd5oF3/sAVt9vuF0A==","shasum":"e486a17db504eac46749158673500f3accf0fff8","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.27e05c5d.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhQ6n2txJB+QIqi8ch9mey0fLqWyeKAqF0IasVxUm8wAiEAh0n3NKJJuRTIgJlfWFPvGjpgxI+/KOSx7BMPqwhmxwY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.27e05c5d.0_1635965117112_0.5376687035410272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.b9e44af7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-button":"0.26.0-canary.b9e44af7.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-SKXxhpjFYAQlWhpcRLV28BquZJ4VFElyN9DQsA5y8UAFzjf0na0Uas4Qx5sY1ijPvxJNJ6qoSEn02d8nxHtDUg==","shasum":"f736a378466724f8a9540915b8c0db66df4fb88b","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.b9e44af7.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0p3rIgy0a5yX7NJUnnPucQirOrYFdSBh6+DLB9GmWiAiEA5rWjrmC0G5H4EgMl0oBeCxElgSgrtDaZhaDTeJYTHwo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.b9e44af7.0_1635966261112_0.15375731864701336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.448f6cb9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-button":"0.26.0-canary.448f6cb9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-FVrC2Bv1DuJi9rqZmFFJ37kxeIaGRpbBBr4Ue4UnkJPAZkC5JYmyhiyTNd9Oh89dKebcXhlsB6RbfnRlKp1kkA==","shasum":"60ab978063db9ca256efa72a01e96e2f8474f001","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.448f6cb9.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqDdQUh11rQoG5Wn6AToI5YAXYTTRFAO6ZXDUvZ0pUFQIgLc7ddOldnuk6m+dazdyx1FXbcxqiZUQLPuDhMIJNxTg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.448f6cb9.0_1636049292433_0.3800145189440016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.8067ce28.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.a986df922.0","@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-button":"0.26.0-canary.8067ce28.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.a986df922.0","@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-TsfsyrryMyaxz/UoV4iu/SDa9NkvDF1vi01LhDJWa1YZSlE/jFOptcS5OY78gnDD9o9M8N4yjmiR/wvOuVyroQ==","shasum":"3bb9ca31ab09b758d7a738a1e68f6b8af819027a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.8067ce28.0.tgz","fileCount":15,"unpackedSize":109196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUJd2+Zbirzq7b8xLCML0LU7auRSzZvKU7RtVjO75fAAiEA0POhLCKV0Rjl9cTLvDlylF09RY4xVHQ2TmQiGht6wo0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.8067ce28.0_1636064565021_0.14444982386396443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.345c2bb9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.43d08ba77.0","@material/dom":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-button":"0.26.0-canary.345c2bb9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.43d08ba77.0","@material/feature-targeting":"=14.0.0-canary.43d08ba77.0","@material/rtl":"=14.0.0-canary.43d08ba77.0","@material/shape":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-W5SvZYITXBceF20o92Zje1UF0ipaD+RnAZ0DXAI9SxGTw56/N07LNM3X9U4+ftkQx7jVNWY4sdgFgMsHxgfntA==","shasum":"0fa75dd40c5767b3f2f8dcf225477b86d59302d9","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.345c2bb9.0.tgz","fileCount":15,"unpackedSize":110336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4OCRA9TVsSAnZWagAACNwQAIv14YQ2u8l37kbQ0w6G\nzEXG7DGiN0X75h3HDA8JJ8S7xDXiX5dv839FoInzuq4XcMxd7QUrGuWAcEy5\npzmEkFYbP/BvJ/u1xUwboT2L107JSjBAwFr1duREAXMu8qEHREEYNX6Utq94\nYk+yAGqeCgYIbKyuqWkGSox/1cI0yoCWRWrCFFQGeteGpsRXUh1EnXVLsouf\ndoqcm5BUhmITF1gkLoJEwEeYPEaw3P0CZJRjVzm7U9NmavGnQZtKGqvYvS0U\n0e/QVNMBvqMBMpkJ4laUGj6+UIdL+1FdRcfH9xGxCEw9p/aWk9JJ6P0uy6ij\n3MRLvpzoMotoN2vylpCCtlBnqO6rsOPSTOlaq36Jk2GiJKxn3IfM/hA592sI\n25tLwG1AbDs/MVi9mG3I36uKSPSIlEGzLLWPSZoykp+ujpzFGD8naHrz0J0d\nwaQ/DbgbwgEJi5oa3lpAVywN21AgPKgcL9os54Ou0UOwgtCEdGSbBf3BaGPl\nibMbJPtVgDH6g8twp2e2AgksiNuJPUexXiwaK5wAeK03LWxc26bXTugUrJdj\n762WRsCrODYfEYhOgVauF6BwtTLZkUjAF1szUkBW2coxqMSTxl+GvO9wiKnz\n2ECPTDGytb47ndyud7KEU486HFlwQgYMsCW9PT8GfOedCFtIbHxXTi60FOmH\na9G4\r\n=abmH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5e9ewC6dhkHPMdW7FItM1Po0X3Mc4S8mSb16RRXTtyAiAM6emlzvaV7PDR+A+VJd80SyymEuiJcxPomXbUsLn3qQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.345c2bb9.0_1638465038083_0.3038618220575595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0547aeeb.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.17a072535.0","@material/dom":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-button":"0.26.0-canary.0547aeeb.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.17a072535.0","@material/feature-targeting":"=14.0.0-canary.17a072535.0","@material/rtl":"=14.0.0-canary.17a072535.0","@material/shape":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-HCrfdqTWOzh9cnLKV+OUmB6MVY6Dd1xoVHpvShrhGKuEOL5b2g6kQG1dMVCCr4ELJbXPKX+EXDLkquFUYAf5Kg==","shasum":"bce9a6ba6c53c25a28e947a3df6f63bbd76aa0f1","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0547aeeb.0.tgz","fileCount":15,"unpackedSize":110336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwbCRA9TVsSAnZWagAAO8IP/j5SjHFA5DeKKGbJjpA4\nGXH8BhMyHQ2olCvEco+AYZOMC1x4/BUnJFiaa76pDJl1CpWo/NKO6f53dogJ\ncV+Aozq5cRt1Tz8/WLPBwOVM+qMWY9ACW/3hgTXt0U1uLrHw3SYvlOIocD4d\nDp5B/CVaqcTVekw/TjwHwdduWowGlJ4MJ3HoX0NXOfTwSNVjxhZ0utt3LpMC\nVtIwza/ZOObiFDHgIv5alv3bXbpq2+nJ/A8pHT7EAvwVVQJ/GZbB2oL6kVHc\nb7e3kbtNWGhHbjZOMi6oDWJT/KUp488IvbZT+EZaXlapGhOHGQCeMrOSjRrL\nlzZpUVnfeyxRDiBU5SrPDzSF1G4bEU/NdXAHyCJIFzyRwMsnhffPE/tm04jy\nzkns9xfG4MKzg9trjrlGbIbn1KqV7tZ2io35lrcoq0dQVpLX8CKVoZwqIxIa\nYjdu9vW9elRvmMmw8L3eZD0auRdIPwcNan5GTl81bvigNGt8Stm6OS3G3AW7\niIEZ2YpPFKrEYhJed89Pe1poSfLgMpx9jIAT39sPM9dz2KVfryvgrm9chk0F\nL7JMOW96DTJXG+MZjBYbTtxEF3LHFCt1RES6XVYXHoI2gqR+DQSCY1M+IGTM\n1rz+DKG5+xRaAHlP7mHS5FWngP2AIhvbwJq38YDq3Nee/UDPzqJHLL4tRkp8\nc+Ki\r\n=yArW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpUJ4dRufG8dlbbTxzzn4W8c2k2ubl2S67evT9zQoiwwIgOkwo5dstZQwsZaEdyh6A/y6Vn+bUDtYwngfnlWyIEm0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0547aeeb.0_1638808603022_0.21313944953588604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.3b2452cc.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.b6510c8c1.0","@material/dom":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-button":"0.26.0-canary.3b2452cc.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"=14.0.0-canary.b6510c8c1.0","@material/rtl":"=14.0.0-canary.b6510c8c1.0","@material/shape":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-kTJG1cuVfSR/Z2YyhAM5B6Z7HB0g+gVnlxiKgsVVm+i9tmdcmrYK3jel8opfTv/2sn1kgS2+6bwtVfvb9cUMmg==","shasum":"797260628a41318292482426e8a6a77374c79218","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.3b2452cc.0.tgz","fileCount":15,"unpackedSize":110336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhvCRA9TVsSAnZWagAAdrgQAIIuGAGg2+sjyJ3KICb7\nqMtcTxgx3QkJZ6t2oj3GvM8MhA1TBEntnP9i3FwPxJB9tE+7lHZ5SfA88ONO\n9Avo91fQjDyAS3ezvMok0dh4BIvuNJ7YQWJrbDCXOTqzT4SU44zYkrSIj6HN\nh1Ol1KIdGmxQK+ZQ3w11m8wZqL7hOuHym/QBYQTloVEuO0v8eOVeGNXb9D4y\nVPOYA2mg8iYL0Va2/iKnf+DXMVwgi2Zd3Cx5NVTZeHs5crIeR+4R3Seml+tx\n1UJuX1EiKlE32t9UcoO6iVgR+ZK5sD/Uq/gPAiRU520EI5u49w65COaiTSAm\nEwigFRFjRPU0tW9j80hDja1/+/EbHV4Qhe3iH87kAamW6V7rpxtI9tCbSdMS\nV4rhaXN4ydkpcJPSaJyWMIQxIeRIJDdmdOGb9bR3CzzYKrVFL4j+IdOyh5h+\nqQbByIqlaFnat0OympxPQCiF1VZ4bs0OGyDmKiTH/i7JenjA1VsQqE/hoEiU\nQ6kJgknIPalOG5TTLWYBW8tD+r8GhKf+gD1sPnDxvDc/CwnIdizSnR7lpzg4\nOMCEL/P7Cq5s2Eb797ns64MvjA51bJQ6cy/ZuqB2ovnhQDpJJ6BAf9f7hYf7\n6PRVIYnu4vqiNhqfdMWZDPcSFq1SJjkvxn6JhePLZJC18/J2Fw230QJrDkcO\n2PvW\r\n=WsOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCO7eVcHJQT4evgi80dYueF/9NhOCxlnde5j1EDrZVmEAIhAKawEc+8p9qQgxlx9sTY2qJBdbSRz9oJh5OMjKTb8WbY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.3b2452cc.0_1639008367441_0.9535231661783354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.f460e23da.0","@material/dom":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-button":"0.26.0-canary.cf7ba5a9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.f460e23da.0","@material/feature-targeting":"=14.0.0-canary.f460e23da.0","@material/rtl":"=14.0.0-canary.f460e23da.0","@material/shape":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-M6C4ODW7QEWh+vXA1szmXc8M/BGkIgVzhvT5BbpPwTDrXq5RQss1wZoVZ1irOCCR60MOzak9EDpAgZHXjTAMMg==","shasum":"96bb5f324edd4a652c15746ef9c489db511a9d66","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":15,"unpackedSize":110336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VtCRA9TVsSAnZWagAAxB0P/RNtVs0UWpfWI35glfef\np13stYGBQOnKDwHvamK4IUjZaj8vwaMnID54UXuvptYOby/eYN6e/mdlRyWK\nPS9hgQfMOWrilN3Sid60gJKZhMddlz+yruIeFoolohCra2CXWoFsw/S3Sdas\nr0MecZBHhWG1tdTNH8mOvEsZ/uC+TAwuoGVZNAuieMJSRHR7c+GKNEM+xI2K\nc+N24ZY2uY61WOmJeXpF4QyrdQC3qJqiZab/x5pUi0lpKtpZQ0to4iLnARPs\nhlLUONx16RfpMMzeYfKW74gy2G0wQpgM276519jPVK7VFauMTtg4W3MOB4RW\nGcgH8HGBcDgmMNNLDF+fl+nG4gnejvbl7wK5vq0BaotJY5lKbE9OVEQ0Xmw0\n80M+y9T2rQ5brYRKAJLvcJB3FF38myrEOARvfeTfNcVGLUIWZVqhJ0rqMPfz\nywGrdT0Rf6ShuZ/rqK+Ohy5OAZ8tPiJlTQRs3z8KPCAkxIMndIiF3YwkoUlu\nO0Qq/Hgoiu29O7+VgdrMEEOu9jFb4U83RVPvYJdW+OP5RQa7Kvhc/nvVx0/t\nbSsF8kAufT+jbhtTHEVn8D7vUINO4DVBzQlxTtoPsuQmS7IOuhLQ00A90Mo+\nxnH5Byfj33Z2ZLfmMwcl1Gk69DLBCGSmyMO3Kwa658Bio3+8HrJnuXgbWr4l\nSGnv\r\n=xS4I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0j4h4VhF2o5LvbZZLzGP/YRKg3wJ/5h8ll1cbFCd3FAiEAnoVKcCTGNmwTr2d4gudgL8dQP+sMPt0oL3FxgschDFI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.cf7ba5a9.0_1639163245719_0.9168702267073445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.3366a71d7.0","@material/dom":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-button":"0.26.0-canary.e1bcf14e.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.3366a71d7.0","@material/feature-targeting":"=14.0.0-canary.3366a71d7.0","@material/rtl":"=14.0.0-canary.3366a71d7.0","@material/shape":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-AerI2if7fLSlzLwrPusIxJ4ccvTqWq0qoh2CA4UTNB5PE7MRbpbtZAZaW6D10aQ2QFYFwqZw7FXAXpMTfO8rEQ==","shasum":"e79ac5100c362a44f2f4eb7fe0ece0a1348a52be","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.e1bcf14e.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eMCRA9TVsSAnZWagAAOx8P/2ZCMUB2aBfgltKNiv9S\nbYhfEO750nGSRiH6I7TRGzH/kOLwDRz5/FVs/E/JwpsaokwSscKTwaaGDfYG\nCljkJEDtRUraMjE3tvbAXd0OBjEjw9QNdasMyCEpUg5NgKDNC16xnM6+cZjD\n2UGaW6aV/3JLaT4E1GATf5D0HuzYNJ3eVFCE1uLCVEa3QBg2z1eVH2sQ7WLZ\nOOBQ6iBMXLdKvYCQRXF3hkte+7Qac+e7BvSh9j4JVlDORm+DWAqdjW7/FwVf\n7AwoIP5kaYz3BLj/WpY5dtpgguiQJ1HLBDDunfHAD/a0H6QUicRP+30ofXi/\nfRzM0TfxpWFKCYEcwbsmM/cTBz2wyM9jX9pmRKvaPCCWIo53fDFgYlga0UXP\nc+BBuArMdDs7itEb0a59HtazPjFwMmQP+yEZx0Bm67stcU5JfNj0YQPaPPhq\nuBq9FUhU6RuQbOv3apnbnVioPm0cm0tyUOnlpHHdd0vyaHcp2p9Y2k5zJImM\nPI3pkO/LbbVLYSQKn4SL6n/aI9Zx3rjq+2nJqh5Fnvn4obiAFRot/NyW3vYv\nEyc97NP/XOB7K0LncAntHgQC4/BOJqPlvJnZgaLPHBylmERrjOxQs2/dCW+V\nCx4Q4/Uj+N9IgWL3oyN+bf5jDSrlhJwgawyQ0NAyCtDoVkA8mmFTI5rGT+Wi\nEHDX\r\n=nt26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq2TMX7WNmrxDYxkeZUJPe1qcT8QDPHsVst7B31Y/KTgIgKEIskWTa5gtcQeyWvShCiwFmLCg8TXiANVkkQ89r87o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.e1bcf14e.0_1640724364036_0.0066485624899401685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.b9d35b69.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.c047f7c19.0","@material/dom":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-button":"0.26.0-canary.b9d35b69.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c047f7c19.0","@material/feature-targeting":"=14.0.0-canary.c047f7c19.0","@material/rtl":"=14.0.0-canary.c047f7c19.0","@material/shape":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-c+4yKKuWikrxOZcqC58btfmqcRRsMzMzIZP5fNlwWOF3u/Jh6GbfYrCEzNDzIR0VqfjCrvH7WLWCQKvKvQOEDA==","shasum":"9529ba52681dc8655ca256708cd0e33cabcb6576","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.b9d35b69.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMcCRA9TVsSAnZWagAAdHIP/2BDbZqyvd5uuyYnDTGg\n0hcsAR93NvAvJcD5ZFbF43Nf550Wt0aW6vZfRKl1arxSHpiYXQ5MiVNOtSpa\nCScMhHwGQnxrMEeW/FmvooVDYBoH7gz2mbRFJc3M/p9SJS7CRhkYmSmUIXnd\n7PRPoEbrp2++j0inTBgYusHSFgi1PRzQEs0dmmH7nfa0tCJcZXzZYXIdsAW6\n6lFYAjuRY8P1KsqabBdB3ba6MvYi40nIxE3N7miuzORsyykK8m0Nn79BY4Zy\noAKUKChzmIg3khLcjisidz9vBk5AoS9NLPr+vRB5fgKkCwYqY5IbUWAMV5/V\numME46eRvzltzo8EV8rKj9qXT4FcAYplNoAyNv197i5Nta+56UAO4J1gR9nJ\nsC9Nza6r2gZlKcBfk+nbSdqSAJwH3YnfUI6qY0mn/T1Fw+fcheSyw7XohQv9\nvY5xXow1r4hJr6xfUyyqQpHMhE8BTcruPiNFgk2IyPrAAE4nzV7hM8mRCmup\nuc8Bdl/LsSV2L1dIPTKtwuE4wm0JF6UuViogQRs7Gr4fWZ1aYMUayxE+hrxF\nVd+i6aScaTtwgf+tnAR9N6xpo8oPNpl81aedHoqmDdu6A4BQv6dIDmgb/UWa\n/XlMwHjo4ZezeEfpIZukoOWWq2dEJkvH/PTa7hyyNooQoF8kTnrGYCg5GzLI\nYZad\r\n=HcRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyY8wu00C+Y94K0ZjOthzvFuYQ1H7yt1vW+fCyRmxQ9gIhAORCgZ+HXLGUIdOGM0uVycVfcuiaKBtzVKJx+4wirxxp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.b9d35b69.0_1641407260350_0.20795224552062863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.2afff08e.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.05db65ec0.0","@material/dom":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-button":"0.26.0-canary.2afff08e.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.05db65ec0.0","@material/feature-targeting":"=14.0.0-canary.05db65ec0.0","@material/rtl":"=14.0.0-canary.05db65ec0.0","@material/shape":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-VfrOdSJz2JyoKQYQ6TBozmZxbIs9uIDGWWd0ZXmACabbBQzqo7CwI3abJTkplXErtGedhMyLwYxq78Xpn9rWLQ==","shasum":"caf6d8674366e1817a8468c622b584b2093935c2","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.2afff08e.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vbCRA9TVsSAnZWagAARl0QAJ4PXu7pbeVJXGAih1gp\n2GZ996adEkGEspAIVMaOR1qfkO0wadWWWkCwi5cpe8uz/V2V88I/CB4s19Nz\n2S33uGYSBB9RI8s+ilN+MHiHlumo/HP89C8umSjy3f8Vf+aF33NTIIByIlJO\ncZTmH1Kcxvo8kSTYWB8Lnd5/Re/xfD/7USo54aXyLBFUZxBMXdLa7dYWzNJd\nZXytMRyIvxWdzROJD5rOcEcPY26hFFwbSEU7gav7Whe4t2F6K59Gi8x4eugX\nU0Y9fT2Kc0Tb1DqDTly0JWzs6Ohga46kicqJEdSvQV0fY6iI3YcoO/ffcaXn\nkPZEj9JoV2BWk7BD6p/voi0kS7QCQzmdade9pCp3Sk8ezOzfHtQVN1IqtyWd\nnhCcq975SNYN4Mh8fG4A3BqIouJ4SLLPPH55XhmaMIGQVemUv0bdkQ/KkrBV\noyrMjGzcnSgv4q3WDoC6/Qzmyho9VbI/x6SShmvVcx527MOq73+GG6dn+NU3\nHgZc6QAUffhwySQ90/B4OR9/A++3Dwo8gATdqqj6Uvv27pPYsS5DoUoXp2mf\nzhvfKLX/jjidDjsuCqlH7RsF0y1aidsWvbRGVeskgHDs7fMd7XldyQEjXuik\nGvSCfLaZBaCc7fAWIsIDNK0HUh/j5S6922VZb4Avg4o9/syg0at69rsveSzr\neNaD\r\n=37O7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4FgvO4omoETqb/IBAJibBO+Xg8aEsvoyH4PXsDfjxMQIgafulmyhfT9wtKojpH1t7GMDx/Zy7GtUQq+ETsu6FTe0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.2afff08e.0_1641507803007_0.5055771645893212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.893fc857.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.6ca8b8f85.0","@material/dom":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-button":"0.26.0-canary.893fc857.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"=14.0.0-canary.6ca8b8f85.0","@material/rtl":"=14.0.0-canary.6ca8b8f85.0","@material/shape":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-WsJvjVEXMZ0+fi4FoXV8Pscz6geUGReITt5o0k7w31wN5SgbamH5hZxubR5FGFKa2uRm1os2isDpWqbSln1tFg==","shasum":"a1bbb90e7e4801a291efa08a50f37fc5ba23a1e6","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.893fc857.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxeCRA9TVsSAnZWagAA/dcP/jNv0hbljlASKxl+ssYB\nZV8i20e4nKsv6p6YcFQq6g0sqJr5pqG7THw4QJ0R5t3dZGuGm/T0FHAM7HXR\nry901rIWK72Bibj77i3ZUAY3Dwt1lMGL5LuLbT1PnP8t7jyTUO4PrWM/aV9q\ngVzP7LBrtXvowuS42PBuD27G5cVbcMgUFDretFcEfiZSNYbxJ2KPg8CC2r7I\nZMFlIKkt0uqqr4ugDJ9KUVwhAyDEZMVulh7B7AKUIWsIFKafYcrrv5wQc4lW\nqJp9DUV1YwEq/woJ6rMUuYmPZYEWz7aQwElaUl3QQY75aW/P+fr4Lr0iZqhL\niOfsPmonXZDDS6KPoOu6shFSVWXq9QYT6KF5ewo9q7evaosYyVgIEPapY2XS\nS73lNpJmE+RyGVXY7TpuVnNyNHJKX3XddguJEu85dpqdDLaWsR8xADJXyAmy\nrgwL3YlWlpQtch5VPYMBtZMTdRA8HR3A5UKWnSbB+n9ctxIFKVMNYxjLgtcc\nMj2iCtumeMCmpsHHXcFMoQHjtemgoUXHpWGns9jT6lZejeKNRsmOakspV22V\nHFoy4oJ/1yy8vHINk2w5WAz0+iFaIxmx5KwYzxk2yUeoxFIqPF27YQf2sTFW\nUoAvexlgTTL3b/mJXs/1ThBCdKh+RBLlCrAUDAKyXAZj4fQkfoV/0s3XgcP2\nugcm\r\n=WXWD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/5zmhfe3/D0AcKQqbW4AdsFPodGQVFggY5g1VLv/FjAiA16VsGWOi8SwqYMRtghtElFl8FrGKrTGKKgGskpAVmvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.893fc857.0_1641581662551_0.7067286966961162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.69ba13b7.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.c14e977ee.0","@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-button":"0.26.0-canary.69ba13b7.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/feature-targeting":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-6oWSm1WuXIEW7DU1qDtGfMKLLEM8VFd60vm75ibp47rc0vLMZXfcuEb19bkAcR9hem77PACYML9uyND0mK3+Ag==","shasum":"a64922c0458357ecb90e0b6502782b38cac5cd9a","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.69ba13b7.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+QCRA9TVsSAnZWagAA7KcP/R2qy201CuEJGAf2AYk/\n3kcYhdpjXGAjfRcYghj+qbq9sKxg/uN/RIPIKrdK6MNLaVikafBZcz3OJpmp\np5288yHP/hXsj7RtXRB+fLO6Jkl0TxMPFCWScY9jOhGXfo1iu9g/mMPGhcDK\ngBYAboiLpp35Yngv6QqfEOkSHcbQfmwmLGnCGfvgVsxPA0w9GvK7MQEk1U6o\njEa8vjivXP+BqcqCDhpOSL+oDJTN0/q6sp2L+2cU8LzSP+eomEC+hKAzAEGP\nsDCPyPjJGruKeGD6WTXMjjDGIu22wdLxrFqzUmalv6P6Ckt0QLzyWlj1rb7F\n08eFZpc4SO0dRLbvXYrQ9pym/Xwo61eAdmvtvuqIjF+dBovjgYBGXMqCC4km\nZM9dXE1Y67yVmimf+2ROpw9yPjko9XyEwb99QTsOzAoSFQcJTSAyuvF9Rcyx\nLVn71anjuXVD+kEOpVCWZS9Xka5f43SSBlZp6EJZQcUa+S+9UAVYnrAF+j3F\nPZfkzM6kBDSzK2ofB0i63cMW71us0lioG4NYqxI5KslJI8YHUF7DFfSpKZv3\nd2ytTA0fYtVnb7/iypUTNAeCf2SR6b+1WJN7CLGb7yTaGsGhKS1GD5p/n1Wo\novi8+BrF0w5NS7Qt2qCDtdvEBtm8UUnW35CxsqdwPGAoJW21LM1C/IS9vnTk\ngkq6\r\n=O629\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7DtH3F1Um7GwE/ITzm0WqW09nVqexYQCIVC731BQcrAiASlGwYivb3NcTHTgJFBqteurdxSidDfvclaYVYPvl1aQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.69ba13b7.0_1642631056663_0.2660159123280026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-dialog","version":"0.26.0-canary.0af8ade5.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.c14e977ee.0","@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-button":"0.26.0-canary.0af8ade5.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/feature-targeting":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-yw077IhWoXqTkAeoa+4MNVmCe5ZQYXNJhEP760lHlPRPdc9acDKoWLoAIoHOqLgxOUEYjUXYSKbW20fi0ysp9A==","shasum":"112a81a87438cba1592770eea4d7c6a23d02e525","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0-canary.0af8ade5.0.tgz","fileCount":15,"unpackedSize":110356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZewCRA9TVsSAnZWagAAC/0P/25fGaPeeGXHmHau2RX4\nu4fuSogODbqzsAsGfPlzMP9HaG4Yzhdlh7nK7vjFaI1jByCgLXhb4oLVhQSo\nXxsah6DBQjfoufGughTSCW8S0IfOrgFrso29iEC5tCKg02Pwo2/rXMURJ1iU\nti4AA/Vi2opY/LOK61PYLhWArvQB2U7RSG4m/TBxuUmx7LRQ8f8jTcJJnKxi\n8P8IIBwns5myh27KFmY67Lyvh3S+XF4f3SxA77+X+NNJzBjhKDTmv6BQq2jo\nf6M+wbSeYsrLm84FH0XSKa3n9aLsVoFP4WhzhlgQpBLYrLxaqPQnDaAjkOeG\naNpYs35c/NOEUn9u9fEkxpnXqTGNo9unAwTfwpbGVJUOBltgPPY5Sd4G5lQk\nySaARFyel6RfnUJ/2D6sj+aqASO/fZoI8OLUyfREmCVNhGvf8QhhefiElqzN\n7bEWtPFuXBhhICDX5eZG+C7fSCsHQYc6zs08np/EmX00HUQXYq3wNX7qeqGW\nQ4gQPz9E8eyCKbqBZpQuahXZVEJtknrqTAg74MT8AWUS4d7AyGLMJAZI+B4Q\n8KBy7w8GHqqVOX/3CffAbDyjFMcV9YhCHxIEbHUp6cMvoiQBQbRk4ZOa2A6U\n0QLeTaVYbKnduM19xfhJ7MVKlj5g5dspd+eZXe9dJQ8v9hyzRtGmFY+jw8lS\nspUZ\r\n=+cxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGl6PPOPxSxb9q7NonJ0bj2eH69cqZAfWwUJIu1WWXlZAiAf24GLimmh5xKkMUuYszE68iuYVjHBXEGvL0GTAZlY6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0-canary.0af8ade5.0_1644271536643_0.5569923614441412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-dialog","version":"0.26.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0","@material/dom":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-button":"^0.26.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0","@material/feature-targeting":"=14.0.0","@material/rtl":"=14.0.0","@material/shape":"=14.0.0","@material/theme":"=14.0.0"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-VTWeBOtYpLtkHvOxi20T5/Nw9q+0OBSIKSus8F80Wg3xi+epdCMbj/YbgfE4SR5EF2xeVGvQMRXKhf6/etJ6bA==","shasum":"73f24b71b44a44d6e2337eb9d424091ce93a22ce","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.0.tgz","fileCount":15,"unpackedSize":110179,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKhYhEIQmeCZMlYfJMdZxelNrYzmADzKB2FFWw0PFXXAiAJNpouDXehCMkkT6o7HH3JROCKoJsPrk5Yi9p9JZ9VHw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrnw/+O+CLjzYbec0tlqADC+dafIyUJeRtlyjKffX6QUH7Af3HCLg/\r\nSqOMhh7iYNxOrgUnkhfLteyV0sblU58JBdxPNE27Dwfoy+7kg2j/6ahGqruZ\r\neb3UYUwRgRRmro+DC0qa+AIJhiCGEEVrl1sDoH1F3FKx79b9QKdj2t0TaYpk\r\nla9KpOcHps3auxT/AMU8UHx0eSS0O4oUzzGDPmBjioTerCB/8ZvNF2jaOhfh\r\nPDcFLc6a/MKs7RaihASuDRJHz586qEs+bz/s3JhZerQmOFSIt3yXH0Sr7NgA\r\ngyEgJgjFnj9GBJa3JwquRORzJe6g33/N9+gWUK1tc2CfP4I/iQFzcW8gscij\r\n0cIEzSSFPtQHHdeSNl7mlp+nqvO9sB6lp+0gtPoBi/eniPXf59Z5ghHt/95v\r\nBQrOSGpnU0ZckPa58miQDYLIaIlxCrxXVP0tAX64TxEGbn2PGPQbbK72pgz4\r\n0sfKAVkcKZwoZmNF9GiOJvVLsRBr5otX/K2jCtwUssyB8vsgJ8xKRLIuKuM1\r\nCeSy4/5D0Q0iR0cgnFoGdiS9KdKrjdI+2UbTqAopt/QFKsrVYmvQMUDIQ9zZ\r\nCZvMaAbMeXS5LObWzhso5Hx95X5OY904q4TemgbDCJwKKletJOAe1ALjml7B\r\nF6JpaIk4Xnu8SWIawF4/ZIU1R+GTgZJroiE=\r\n=GUyx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.0_1651599039427_0.30673284333753403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-dialog","version":"0.26.1","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.53b3cad2f.0","@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-button":"^0.26.1","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-QI9OkD0ZXZRyxA9I3ZbRjn4iRdDh/u+ZtcfZtIhKKgm3S0pkHAxndNlygq8DHQgwCO5HxMcmEot7voAdDtpfoQ==","shasum":"afaee3a7a8c563554a54ecf73adf42b66992b3b7","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.26.1.tgz","fileCount":15,"unpackedSize":110436,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5fFi2Xvo2OKyLXzVmnMbyO+9ZY9hY3Inmu0WL3tyxjAIgJgzX0HFlnxlShmID98zvzf0V4GUrLee52uH/q3g5mfo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMEA/7BopcPfvOSaT5o+NpwXA5wjAAxJXoomsP8iHr8GFXTlC3TFKF\r\nwhq3YS3dTJmW4nxbVyyB7hazTIzApKmm+4LOSVyHPdLBUBTnY0EHm8vRfa8H\r\nGhVpQzNm4DQJqcRpaG0R5fBZYB4SKLZ7uih2GERrNpM80+Fo0Vzedo993VVf\r\nw//Bi9XzA5iz+d2U5Qf4hNZ7puL1eE3Eo5KU6vZeH2Q7h8X/ctDvOdCSMREr\r\ns5g3bdJ6YAieINh0nStoXGeUMilmJPxmC8uMiM3wJe+K1KtPQzCDFybo2Jxs\r\nS2B3fddDD5r8RJ5xqE7XYWj/DDUxxtgPDTa/pqiaONNoc79FfLXQYJCn2eA8\r\npZLiZdxHESofg0Z8sN4osrCSoC9F5mZq31R/S0nexWbo+GDvqC20TYjXA9QC\r\njLwjmOoIdxYmCG/xhhlsayZhF1OW5T6zOWkm2QEPX/Hiu+hXACsQsyTe3rq3\r\nYbNfTqpz0CTOq8bagbD9XPiLLAGjp2Y5pUdtc8FlXRxY0PC4+ZmMueHkOOiO\r\nU+gJF2AHE0c14AiXh50CZzRVn2YafWJtRfp6iSN+2SDT0oe4e839/vZve2zW\r\n4wHKruAHijbmWC867jkiXEsfOSbT5tN63PFsgFyza4fSJRNJIryooFAiupmN\r\ncoKTFOT8F4E22xeA6UGeVSfOQspsWkTztC8=\r\n=Zri/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.26.1_1652128317681_0.024985867509245363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-dialog","version":"0.27.0","description":"Material Design dialog web component","keywords":["material design","web components","dialog"],"main":"mwc-dialog.js","module":"mwc-dialog.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"license":"Apache-2.0","dependencies":{"@material/dialog":"=14.0.0-canary.53b3cad2f.0","@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-button":"^0.27.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-dialog.scss"},"devDependencies":{"@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-dialog@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-rkOEmCroVs0wBQbj87vH79SvSHHZ61QRCTUYsU2rHGZCvdzlmvHjWdoyKjJER6WwwM3rrT8xthfecmjICI28CA==","shasum":"9dca4b5bdd9efc380bd48de2d09629e40741403d","tarball":"https://registry.npmjs.org/@material/mwc-dialog/-/mwc-dialog-0.27.0.tgz","fileCount":15,"unpackedSize":110436,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmjNiT1epIX+n056UtpWGowAQdZAQYdBPNQT4XM4C7QAiEArXbyFz5HmvuEfAd6/KNCBPVxMWt1KnFe193JU3WLk3M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3ZA/+P8MSXCC1w4/e9lifpOFqN05vLlbUrq08Uo9GamSiIJHYgcpk\r\nS5SlJWPkStqwsBK/WV8o5R6PRuQNuuw4zmgZQywMnbU/Uo/5+mQQcfjTuEGD\r\n5YP9Aql2pRYz2dNVH/HDukF+hsfsfsOl1NP6M2FOipxCrCbB6DufQhjlKhVI\r\nBIoyMGQDOZFgJjmJuuhIfkw/QjARrgkymZaRFPFLURwOP0D3AIRsKuA+x4Y/\r\nwYcQCrFMT+2Fe2uJnNEHSuN56iq5jjmkUrSlY+nCOgOdSopYfHTxTQ8Dyddb\r\ndIJF1SfolF+H2pjs+jG+kWAuyDlDmlGdk9NeAEdejWtiUX0C9a2b2pwZPhi1\r\nQEDRkGGJw5Avj6iS+Od0l52NPAszR2Vjsgg0tkt1XYU4LRE+rgcuRazK8LcS\r\nSYJ7prUoua7tw0wFi7k5ACZbvF6Mvhd/mohAmc6djWhNLqgytQVlu8a3v13F\r\nq/4IQOwb2d8JQqoQDWzrYgM2G+JIXFEruAOeszWncjnbAcma6dgDvw99+24G\r\n2jkvoSRNy1slwvKkY7DVFMjP/55AF48uWHKwHdMyQxb1RE9RHOHYTwtQr74l\r\nJ2aW9TkB5W51jmCljE2q36xKhLhlT9/znc3Az47xYh8TzYx45b7cmNRMyQb0\r\nbjqd4L598vMCbe03Iam90fGW7IRFvj4PqtA=\r\n=rOGw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-dialog_0.27.0_1660331533839_0.3195102262353664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-09-27T01:36:04.149Z","0.9.0":"2019-09-27T01:36:04.584Z","modified":"2024-04-04T18:47:54.486Z","0.9.1":"2019-09-30T21:04:51.790Z","0.10.0":"2019-10-11T23:28:11.635Z","0.11.0":"2019-11-26T21:49:26.837Z","0.11.1":"2019-11-27T00:26:29.920Z","0.12.0":"2019-12-17T23:47:47.306Z","0.13.0":"2020-02-04T04:46:28.419Z","1.0.0-canary.66f6244e.0":"2020-02-28T02:19:19.479Z","0.14.0-canary.f790f713.0":"2020-02-28T02:27:53.087Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:27.972Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:00.481Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:23.891Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:42.447Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:16.737Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:33.135Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:27.113Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:23.382Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:18:48.160Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:11.197Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:01.630Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:19:50.021Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:55:49.727Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T02:59:52.123Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:11.569Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:24.515Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:01:55.847Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:35.625Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:03.949Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:22.978Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:35.587Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:26.173Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:16:39.721Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:00.156Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:23.646Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:27.513Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:16.561Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:54:58.143Z","0.14.0-canary.134cf877.0":"2020-03-19T20:38:53.303Z","0.14.0":"2020-03-19T21:28:24.973Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:31.546Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:12:33.706Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:26.569Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:04.539Z","0.14.1":"2020-03-23T17:57:25.107Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:24.432Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:13.255Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:45.219Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:32.302Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:39.175Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:00.327Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:13:57.262Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:00.518Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:19:48.577Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:07.849Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:15.530Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:16.036Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:32.359Z","0.15.0-canary.6b946095.0":"2020-04-03T21:23:43.555Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:11.462Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:25.878Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:24.880Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:56:59.426Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:03.846Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:17.741Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:15:59.127Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:38.493Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:23.410Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:44:58.328Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:13.792Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:03:44.049Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:36.505Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:30.834Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:00:57.605Z","0.15.0-canary.bade5580.0":"2020-04-17T23:18:48.767Z","0.15.0-canary.dae38247.0":"2020-04-18T00:15:44.712Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:33:53.985Z","0.15.0-canary.715decfe.0":"2020-04-20T18:34:50.456Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:38.455Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:02.370Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:50:49.480Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:23.352Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:11:41.674Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:10.303Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:27.226Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:13.446Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:26.481Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:27.877Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:33.982Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:33.212Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:43:43.402Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:13:40.522Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:12.974Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:18.308Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:16.569Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:15.582Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:31.452Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:26:45.541Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:12:57.931Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:26:42.685Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:15.505Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:34.439Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:23.103Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:24:57.802Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:23.455Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:06.841Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:03.435Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:27.560Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:27.890Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:40.073Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:13.227Z","0.15.0":"2020-05-05T22:36:04.043Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:03:57.821Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:14.076Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:40:42.534Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:00.601Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:05.790Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:28.595Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:11.030Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:30.536Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:18.274Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:17:48.257Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:24.542Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:33:43.780Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:18:40.598Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:09.403Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:51:43.434Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:35:56.209Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:05.705Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:17.353Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:05.536Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:04.574Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:05.168Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:23.475Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:23:45.954Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:37:56.572Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:37:41.266Z","0.16.0-canary.421a6856.0":"2020-05-20T05:23:43.905Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:17.630Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:39:56.444Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:32:46.821Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:06:14.020Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:15.307Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:41:58.449Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:30.468Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:29:41.183Z","0.16.0-canary.43bde144.0":"2020-05-27T18:28:44.249Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:40.353Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:02.164Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:20.100Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:08.191Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:48:44.558Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:09.371Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:20.945Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:03.107Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:09.024Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:37.583Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:10.971Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:23.686Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:24.630Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:00.667Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:12.190Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:28.297Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:12.208Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:41.102Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:57:29.266Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:15.521Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:15.192Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:16.434Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:24.947Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:06.392Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:19.508Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:19.340Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:16.893Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:46.211Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:34.670Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:53:56.287Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:27.542Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:46.316Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:35:55.870Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:28:26.860Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:37:47.332Z","0.16.0-canary.a3384d2d.0":"2020-06-30T20:59:55.457Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:21.733Z","0.16.1":"2020-06-30T21:14:38.237Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:43.483Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:24.986Z","0.17.0":"2020-07-01T19:43:59.320Z","0.18.0-canary.fd970958.0":"2020-07-01T23:32:53.705Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:03.336Z","0.17.2":"2020-07-02T05:58:10.318Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:58:54.066Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:04.058Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:43.398Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:31:55.297Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:08.486Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:21.520Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:04.579Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:47:50.214Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:36:56.040Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:31.145Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:20.986Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:01.808Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:15.499Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:22:57.010Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:22.905Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:53:53.835Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:38.675Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:01.507Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:28.945Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:41:22.810Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:56:51.493Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:30.663Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:24.775Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:16.051Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:14.500Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:32.474Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:09:53.307Z","0.18.0-canary.718c385c.0":"2020-07-23T20:05:51.747Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:18.509Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:41.795Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:20:51.935Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:04.421Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:20.446Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:36.507Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:41:57.829Z","0.18.0-canary.99df7397.0":"2020-07-29T02:39:59.438Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:07.169Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:20:52.116Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:24.991Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:42:41.901Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:42.909Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:08.049Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:24.464Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:02.110Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:34.905Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:51.770Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:03.844Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:31.150Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:08.351Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:58.462Z","0.18.0-canary.21c55569.0":"2020-08-03T19:57:01.588Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:45.552Z","0.18.0":"2020-08-03T21:24:37.192Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:15.108Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:30.738Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:07.676Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:19.579Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:48.033Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:46.161Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:10.464Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:47.870Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:14.013Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:20.997Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:51.598Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:46.251Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:20.410Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:03.827Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:28.399Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:47.541Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:54.162Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:39.903Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:02.431Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:22.457Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:57.520Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:03:04.964Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:23.724Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:17:00.762Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:27.655Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:28.383Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:15.346Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:25.687Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:19.519Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:51.369Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:36.617Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:57.613Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:35.565Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:13.742Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:29.442Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:49.096Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:33.039Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:29.466Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:36.294Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:43.507Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:59.714Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:31.395Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:37.299Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:56.466Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:55.620Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:16.071Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:08:00.416Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:31.075Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:36.536Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:43.001Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:40.847Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:53.377Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:35.000Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:35.702Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:45.478Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:51.139Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:40.743Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:09.114Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:14.283Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:42.228Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:24.786Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:27:00.602Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:02.868Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:53.467Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:05.819Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:28.974Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:51.270Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:46.115Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:54.323Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:47.411Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:38.321Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:40.714Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:29.706Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:52.486Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:16.861Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:29.450Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:47.607Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:09.269Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:51.414Z","0.19.0":"2020-10-07T22:33:30.430Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:09.344Z","0.19.1":"2020-10-08T23:06:08.939Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:41.027Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:42.363Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:40.758Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:45.969Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:17.731Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:53.082Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:52.675Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:40.229Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:30.343Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:40.131Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:15.793Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:27.062Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:38.209Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:32.878Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:51:00.254Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:59.768Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:19.915Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:10.945Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:09.423Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:20.374Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:23.939Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:31.123Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:28.170Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:11.816Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:51.971Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:32.174Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:45.795Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:15.322Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:42.982Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:03.800Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:38.837Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:19.052Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:59.160Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:56.372Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:09.999Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:36.478Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:44.397Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:45.388Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:42.032Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:14.141Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:56.346Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:43.431Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:45.211Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:11.550Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:29.316Z","0.20.0":"2020-12-03T22:28:55.435Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:11.345Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:30.048Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:24.093Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:22.142Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:21.815Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:34.898Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:08.608Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:03:03.071Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:50:00.539Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:41.147Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:37.595Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:28.405Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:58.554Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:20.641Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:49.068Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:36.159Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:55.602Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:50.896Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:44.300Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:50.328Z","0.21.0-canary.2899691d.0":"2021-01-16T01:45:01.646Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:49.422Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:46.135Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:24.134Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:55.339Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:07.266Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:37:01.146Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:58.503Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:58.037Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:55.353Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:57.031Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:07.889Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:18.833Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:39.256Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:59.265Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:32.940Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:37.488Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:54.883Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:34.258Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:02.869Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:09.488Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:52.974Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:17.465Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:29.385Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:40.828Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:08.106Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:31.864Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:33.934Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:20.882Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:29.524Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:44.765Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:17.704Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:31.958Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:39.504Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:58.357Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:26.084Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:35.928Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:39.951Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:54.636Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:31.350Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:40.981Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:35.621Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:53.656Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:09.744Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:31.499Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:38.683Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:07.451Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:48.672Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:34.648Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:55.499Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:11.636Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:56.890Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:39.390Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:56.929Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:24.056Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:11.288Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:39.704Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:12.955Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:09.471Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:52.835Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:17.440Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:12.467Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:26.995Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:54.230Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:50.115Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:19.711Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:05.594Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:29.387Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:14.320Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:46.624Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:30.304Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:23.217Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:44.817Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:22.031Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:58.259Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:50.745Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:15.530Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:45.312Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:59.979Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:38.071Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:39.728Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:49.243Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:31.224Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:27.830Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:44.295Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:14.178Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:20.228Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:26.374Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:12:03.290Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:03.676Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:55.981Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:34.157Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:18.017Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:44.586Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:19.528Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:46.779Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:28.256Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:29.011Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:57.562Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:35.056Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:54.501Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:42.998Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:55.538Z","0.21.0":"2021-04-30T23:58:13.933Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:39.845Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:33.987Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:57.988Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:11:05.572Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:17.722Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:48.171Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:51.551Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:21.886Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:17.770Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:40.378Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:37.652Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:35:00.587Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:55.780Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:43.822Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:28.513Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:52:03.682Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:01:00.787Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:42.547Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:46.469Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:32.993Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:47.363Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:14.755Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:52.110Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:27.104Z","0.22.0-canary.2212691a.0":"2021-05-17T23:53:01.504Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:52.653Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:20.383Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:38.955Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:24.315Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:23.128Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:51.057Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:10.900Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:39.764Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:46.030Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:51.484Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:51.066Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:28.810Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:51.503Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:43.145Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:32.580Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:44.381Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:40.672Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:29.187Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:35.045Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:51.853Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:32.756Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:06.304Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:25.707Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:39.415Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:19.177Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:10.772Z","0.22.0-canary.21dba001.0":"2021-06-21T21:41:01.016Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:28.434Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:33.921Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:26.489Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:42.933Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:13.945Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:28.089Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:42.218Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:49.291Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:43.526Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:56.276Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:10.803Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:12.448Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:38:02.224Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:30.374Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:19:03.958Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:00.904Z","0.22.1":"2021-07-14T22:53:04.826Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:32.484Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:57.918Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:09.908Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:23:02.562Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:28.378Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:12.813Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:24.907Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:38.529Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:10.696Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:31.543Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:07:00.389Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:26.034Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:03.620Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:10.171Z","0.23.0-canary.104debd5.0":"2021-07-19T22:54:00.577Z","0.23.0-canary.4612705d.0":"2021-07-20T16:05:03.721Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:35:02.527Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:22.005Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:17.097Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:29.457Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:38.683Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:38.767Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:12.494Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:20.327Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:28.695Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:31.781Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:59.825Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:49.395Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:37.362Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:21.429Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:14.084Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:10.827Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:55.539Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:07.414Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:20.375Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:56.184Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:18.021Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:59.998Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:20.074Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:26.120Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:05.736Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:29.737Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:41.149Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:25.120Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:53.323Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:45.576Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:48.558Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:39.202Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:47.857Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:58.659Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:58.161Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:44.514Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:07.347Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:31.911Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:49.239Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:22.173Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:17.327Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:26.978Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:41.638Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:20.523Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:13.109Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:28.871Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:14.579Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:32:04.094Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:28.533Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:56.294Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:10.466Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:39.413Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:52.761Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:14:05.294Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:13.393Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:49.060Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:25.779Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:11.825Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:49.796Z","0.23.0":"2021-09-13T21:35:54.102Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:35.724Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:40.478Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:45.112Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:47.928Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:22.382Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:37.884Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:21.723Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:09:03.375Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:40.414Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:16.428Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:46:04.312Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:24.373Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:03.562Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:25.426Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:11.387Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:10.997Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:06.024Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:27.815Z","0.25.1":"2021-09-21T03:12:47.556Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:24.874Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:33.931Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:05.886Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:55.974Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:26.013Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:39.306Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:48.883Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:08.382Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:07.158Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:10.594Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:34.626Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:51.420Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:31.662Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:38.382Z","0.25.2":"2021-10-11T23:18:39.469Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:46.738Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:17.158Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:54.529Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:46.916Z","0.25.3":"2021-10-21T17:55:49.828Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:46.592Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:13.147Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:04.291Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:41.544Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:10.029Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:52.454Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:17.278Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:21.253Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:12.595Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:45.160Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:38.261Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:43.163Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:07.620Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:25.941Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:46:04.239Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:40.531Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:23.200Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:22.820Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:16.792Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:36.847Z","0.26.0":"2022-05-03T17:30:39.574Z","0.26.1":"2022-05-09T20:31:57.857Z","0.27.0":"2022-08-12T19:12:13.996Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design dialog web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/dialog"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-dialog.svg)](https://www.npmjs.com/package/@material/mwc-dialog)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nDialogs inform users about a task and can contain critical information, require\ndecisions, or involve multiple tasks.\n\n\n\n[Material Design Guidelines: dialogs](https://material.io/design/components/dialogs.html)\n\n[Demo](https://material-components.github.io/material-web/demos/dialog/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-dialog\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n\n\n\n\n### Alert\n\n\n\n```html\n\n
Discard draft?
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Confirmation\n\n\n\n```html\n\n\n\n
\n \n \n \n \n \n \n \n \n \n
\n \n ok\n \n \n cancel\n \n\n\n\n```\n\n### Scrollable\n\n\n\n```html\n\n
\n really large amount of text...\n
\n\n Accept\n\n\n Decline\n\n\n```\n\n### Styled\n\n\n\n```html\n\n\n\n
\n In this dialog we have changed the button color and removed the border\n radius.\n
\n \n This button is bluish!\n \n\n```\n\n### Stacked\n\n\n\n```html\n\n
\n This is what happens when you set the stacked property on mwc-dialog.\n Notice that the primary action is now on top.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n### Form Validation\n\n\n\n```html\n\n

This dialog can validate user input before closing.

\n \n \n \n Confirm\n \n \n Cancel\n \n\n\n```\n\n### Prevent Scrim Clicks\n\n\n\n```html\n\n
\n This will prevent a click outside of the dialog from closing the dialog.\n
\n \n Discard\n \n \n Cancel\n \n\n```\n\n### Prevent Escape Key Action\n\nYou can prevent the default escape key action from closing the dialog by setting\nthe `escapeKeyAction` attribute to an empty string `\"\"`.\n\n```html\n\n
\n This will prevent the escape key from closing the dialog.\n
\n \n Primary\n \n \n Secondary\n \n\n```\n\n## API\n\n### Slots\n\nName | Description\n----------------- | ------------------------------------------------------------\n_default_ | Primary content area. May contain a list, a form, or prose.\n`primaryAction` | Footer area containing the dialog's primary action button.\n`secondaryAction` | Footer area containing the dialog's secondary action button.\n\n### Properties/Attributes\n\n| Name | Type | Description\n| ----------------------- | --------- |------------\n| `open` | `boolean` | Whether the dialog should open.\n| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.\n| `stacked` | `boolean` | Whether to stack the action buttons.\n| `heading` | `string` | Heading text of the dialog.\n| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent clicks outside the dialog from closing the dialog.\n| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the escape key was pressed (see [actions section](#actions)). Setting this attribute to an empty string `\"\"` will prevent the escape key from closing the dialog.\n| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `.open` is toggled (see [actions section](#actions)).\n| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value (see [actions section](#actions)).\n| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.\n\n### Methods\n\n| Name | Description\n| -------- | -------------\n| `forceLayout() => void` | Forces dialog to relayout (animation frame time). May be required if dialog size is incorrect or if stacked layout has not been triggered correctly.\n| `focus() => void` | Focuses on the initial focus element if defined (see [focus section](#focus)).\n| `blur() => void` | Blurs the active element.\n| `show() => void` | Opens the dialog.\n| `close() => void` | Closes the dialog.\n\n### Listeners\n| Event Name | Target | Description\n| ------------------- | ------------ | -----------\n| `click` | root element | Detects if clicked target is a dialog action.\n| `resize` | `window ` | Performs dialog layout (passive).\n| `orientationchange` | `window` | Performs dialog layout (passive).\n| `keydown` | `mwc-dialog` | Listens for the enter key to click the default button (passive).\n| `keydown` | `document` | Listens for the escape key to close the dialog (see [`escapeKeyAction`](#properties)).\n\n### Events\n\n| Event Name | Target | Detail | Description\n| ---------- | ------------ | ------------------ | -----------\n| `opening` | `mwc-dialog` | `{}` | Fired when the dialog is beginning to open.\n| `opened` | `mwc-dialog` | `{}` | Fired once the dialog is finished opening (after animation).\n| `closing` | `mwc-dialog` | `{action: string}` | Fired when the dialog is is beginning to close. Detail is the action that closed the dialog (see [actions section](#actions)).\n| `closed` | `mwc-dialog` | `{action: string}` | Fired once the dialog is finished closing (after animation). Detail is the action that closed the dialog (see [actions section](#actions)).\n\n### CSS Custom Properties\n\nName | Default | Description\n----------------------------------- | ----------------------------------------------------------- | -----------\n`--mdc-dialog-scrim-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/dialog/images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).\n`--mdc-dialog-heading-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/dialog/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.\n`--mdc-dialog-content-ink-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/dialog/images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)` | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).\n`--mdc-dialog-scroll-divider-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/dialog/images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.\n`--mdc-dialog-min-width` | `280px` | min-width ofthe dialog surface.\n`--mdc-dialog-max-width` | `560px` | max-width of the dialog surface. (**Note:** if max-width is < `560px`, there is a visual jank bug that will occur causing the max width to be `560px` when the window is sized to <= than `560px`).\n`--mdc-dialog-max-height` | `calc(100% - 32px)` | Max height of the dialog surface.\n`--mdc-dialog-box-shadow` | mdc elevation 24 | Sets the box shadow of the dialog.\n`--mdc-dialog-z-index` | `7` | Sets the `z-index` of the dialog and scrim.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --------------- | ---------\n`24` | `0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global\n[theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n| ---------------------------------------- | -----------\n| `--mdc-theme-surface` | Color of the dialog surface's background.\n| `--mdc-shape-medium` | Corner radius of the dialog surface.\n| `--mdc-typography-body1-` | Styles the typography of the dialog's text.\n| `--mdc-typography-headline6-` | Styles the typography of the action buttons.\n\n### Actions\n\nActions close the dialog on click. You can define an action by slotting an\nelement with the `dialogAction=\"...\"` string attribute. The name of the\nattribute can be customized by the\n[`actionAttribute` property](#propertiesattributes). When a clickable element\nwith the `dialogAction` attribute is clicked, `mwc-dialog` will get the value of\nthe attribute and fire the `closing` and subsequent `closed` events with a\ndetail of `{action: }`.\n\nFor example:\n\n\n\n```html\n\n
\n
\n This is my content. Here is an actionable button:\n \n
\n
\n This is my content. Here is a diabled actionable button:\n \n
\n
\n ok\n cancel\n\n```\n\nIn this example we have 3 actionable elements: `html button 1`\n\n```html\n\n```\n\n```html\nok\n```\n\n* Clicking button 1 will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'contentButton'}`.\n* Clicking button 2 will not close the dialog since it is disabled\n* Clicking the cancel `mwc-button` will not close the dialog as it does not\n have a `dialogAction` attribute set on it.\n* Clicking the ok `mwc-button` will close the dialog and fire a `closing` and\n subsequently a `closed` event with a detail of `{action: 'ok'}`.\n* Setting `document.querySelector('mwc-dialog').open = false;` will close the\n dialog and fire a `closing` and subsequently a `closed` event with a detail\n of `{action: 'close'}` (action is configurable via\n [`defaultAction` property](#propertiesattributes)).\n\n### Focus\n\nInitial focus can be set on an element with the `dialogInitialFocus` boolean\nattribute (configurable via the\n[`initialFocusAttribute` property](#propertiesattributes)).\n\nFor example:\n\n\n\n```html\n\n
\n In this example we set \"dialogInitialFocus\" on the mwc-textfield.\n When this dialog opens, it is auto-focused.\n
\n \n \n \n Primary\n \n \n Secondary\n \n\n```\n\nIn this example we set `dialogInitialFocus` on the `mwc-textfield`, so\n`mwc-textfield.focus()` will be called on the button. This attribute can also be\nset on anything in the light DOM of `mwc-dialog` or the light dom of the\nflattened, distributed nodes including the primary and secondary actions. Only\none element designated with this attribute will be focused.\n\nCalling `focus()` on the `mwc-dialog` itself will call `focus()` on any\n`dialogInitialFocus` element in the light DOM of `mwc-dialog`.\n\nCalling `blur()` on the `mwc-dialog` will attempt to blur the\n[`activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)\nof the shadow root of `mwc-dialog` or the\n[root node](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)\nof the dialog.\n\n## Additional references\n\n- [MDC Web dialogs](https://material.io/develop/web/components/dialogs/)\n","readmeFilename":"README.md","keywords":["material design","web components","dialog"]}